- 列表样式
- list-style-type:none; 去除无序列表前的实心圆点;
- 浮动
- 浮动常结合div无限嵌套进行网页布局;
- float:left; 向左浮动;
- float:right; 向右浮动;
- 浮动元素会按指定方向浮动,直到碰到其它浮动元素和边框。若碰到非浮动的普通流,则会覆盖在这些元素之上。若要这些元素不被覆盖,需要用以下方式清除浮动。
- 清除浮动:
- clear:left right both;
- 给浮动的父级元素固定高度;
- 给浮动元素的父级添加overflow:hidden; 裁剪超出边框的内容;
- 盒模型:
- 整个模型的范围=元素宽高+內边距+边框粗细+外边距
- 外边距
- margin-top;margin-bottom;margin-left;margin-right;分别定义元素的上边距,下边距,左边距和右边距。若四边边距一样,则可简写成margin.
- margin:0 auto; 水平方向上的居中;
- 四个值:margin:10px 20px 30px 40px;(上右下左)
- 三个值:margin:10px 20px 30px(上10px 右20px 下30px 左20px)第四个缺少的左边距会参考右边距的设定;
- 两个值:margin:10px 20px(上下为10px, 左右20px)
- 內边距
- padding-top:上內边距
- padding-bottom:下內边距
- padding-left:左內边距
- padding-right:右內边距
- padding:10px 20px 30px 40px ;(上右下左)
- padding:10px 20px 30px; 第四值等于第二值
- padding:10px 20px ;上下10 左右20
- padding:10px 所有的值
- 边框:
- 颜色
- border-left-color:
- border-right-color:
- border-top-color:
- border-bottom-color:
- 宽度
- border-left-width:1px
- border-right-width:
- border-top-width:
- border-bottom-width:
- 样式
- border-left-style:solid 细实线
- double 双实线
- dotted 点线
- dashed 虚线
- 简写:border:1px solid #aaa;
- 去除边框:border-left:none
- 圆角边框:border-radius:10px; 圆角的半径
- 阴影box-shadow:10px 20px 30px 40px red inset;
- 10px 在水平方向上的偏移量
- 20px 在垂直方向上的偏移量
- 30px 模糊程度
- 40px 模糊尺寸(将阴影的水平,垂直尺寸扩充40px)
- red 阴影的颜色
- inset 内部阴影(不写时默认为外部阴影)
- 颜色
- 不同元素之间会有默认自带的margin和padding,常常会影响页面的布局。所以尽量使用div和span布局,若要使用其他元素,为了避免自带的margin和padding的影响,可以同福哦”*{margin:0px; ub apadding:0px}”(不包括引号)
0227CSSS学习
最新推荐文章于 2023-06-29 11:29:49 发布