CSS盒子模型、列表样式

盒子模型

常用的html标签都可以看作一个盒子，称为盒子模型
盒子由四部分组成：
content、padding、border、margin

边框

border:border-width（粗细） | border-style(样式) | border-color（颜色）

	#one{
            border:1px solid red;
        }
1
2
3

border-style

边框拆分写法：

方位：top、bottom、left、right
其他：width、style、color

border-方位-其他

       #two{
            border-style:dashed;
            border-color:green;
            border-width:5px;
        }
1
2
3
4
5

        #three{
            border-top:10px solid blue;
            border-left-color:#CCC;
            border-left-style: dotted;
            border-left-width: 10px;
        }
1
2
3
4
5
6

圆角边框

border-radius:length
length:px \ %

	#four{
            border:2px solid black;
            border-radius:50%
        }
1
2
3
4

border-radius:左上 右上 右下 左下

	#four{
            border:2px solid black;
            border-radius:15px 15px 15px 0;
    }
1
2
3
4

内边距

padding:10px
padding:20px 10px;(上下 左右)
padding:20px 10px 30px 30px;（上 右 下 左）

padding-left
padding-right
padding-top
padding-bottom

外边距

margin:20px;
margin:20px 10px;(上下 左右)
margin:20px 10px 30px 30px;（上 右 下 左）

margin-left
margin-right
margin-top
margin-bottom

取消内外边距：

        *{
            margin:0;
            padding:0;
        }
1
2
3
4

html标签默认有内外边距，开发时需要先取消掉

盒子居中

margin:0 auto;
1

盒子大小计算：
宽度：内容宽+padding+border
高度：内容高+padding+border
计算宽高,不算margin
有时候会发生margin塌陷

box-sizing：
指定计算盒子宽高的方式，有两个值：content-box(默认)、border-box;
当box-sizing：border-box;时，width和height就是最终的宽高,不再受padding影响

margin塌陷：
上下相邻的两个元素，并且上有margin-bottom，下有margin-top，会发生塌陷，塌陷后，margin取最大值

父子嵌套时，父元素有margin-top，子元素也有margin-top，会发生塌陷，塌陷后，margin取最大值

盒子阴影：
box-shadow：水平 垂直 模糊距离 影子大小 阴影颜色 内/外阴影；

box-shadow: 5px 5px 5px 5px rgba(0,0,0,1);
1

列表样式

针对ui-li \ ol-li设置的样式
list-style-type | list-style-image | list-style

list-style-type 设置圆点或序号的样式
list-style-type :none | disc(默认)…

list-style-image 使用图片代替圆点
list-style-image:url(图片路径)

list-style 既能设置圆点样式，又能设置图片样式
list-style:none；
list-style:url(图片路径)

            list-style:url();
            list-style-position: inside;
1
2