今头条！css学习(二)

手机

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

搜狐汽车全球快讯 | 大众汽车最新专利曝光：仪表支持拆卸可用手机、平板替代-环球关注

家电

今头条！css学习(二)

2023-07-02 19:07:10 来源：博客园

(相关资料图)

css盒子模型

认识盒子模型

我们可以把HTML每一个元素看出一个个的盒子.具备如图四个属性因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边

内容设置内容是通过宽度和高度设置的:宽度设置: width,默认是auto,交给浏览器决定,块级元素独占一行.高度设置: height

注意: 对于行内级非替换元素来说, 设置宽高是无效的!,例如span

paddingpadding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距.

border边框相对于content/padding/margin来说特殊一些:
- 边框具备宽度width;
- 边框具备样式style;
- 边框具备颜色color;

.box {      display: inline-block;      width: 300px;      height: 300px;      /* width */      /* border-top-width: 10px;      border-right-width: 20px;      border-bottom-width: 30px;      border-left-width: 40px; */      /* border-width: 10px 20px 30px 40px; */      /* style */      /* border-top-style: solid;      border-right-style: dashed;      border-bottom-style: groove;      border-left-style: ridge; */      /* border-style: solid dashed groove ridge; */      /* color */      /* border-top-color: red;      border-right-color: blue;      border-bottom-color: green;      border-left-color: orange; */      /* border-color: red blue green orange; */      /* 总缩写属性 */      border: 10px solid red;    }

border-radiu

.box {      /* 设置圆角 */      /* 设置具体的数值 */      /* border-radius: 20px; */      /* 设置百分比 */      /* 百分比相对于谁, 了解即可 */      border-radius: 10%;    }

margn 外边距

margin一般是用来设置兄弟元素之间的间距padding一般是用来设置父子元素之间的间距利用margn进行水平居中

width=width(内容)+padding+border+marginleft+marginright 设置0 auto利用浏览器设置margin进行居中

外轮廓和盒子阴影不常用

box-sizing

css设置背景

高级元素

    热门股票                  排名         股票名称         股票代码         股票价格         股票的涨跌       
    
                  1         贵州茅台         600519         1800         5%       
              1         贵州茅台         600519         1800         5%       
              2         腾讯控股         00700         400         3%       
              3         五粮液         000858         160         8%       
    
                  其他         其他         其他         其他         其他       
      
也可以使用简单的tr,td进行操作,然后给第一行添加样式

热门股票
排名	股票名称	股票代码	股票价格	股票的涨跌
1	贵州茅台	600519	1800	5%
1	贵州茅台	600519	1800	5%
2	腾讯控股	00700	400	3%
3	五粮液	000858	160	8%
其他	其他	其他	其他	其他

input相关介绍

关键词：