一、今日学习内容:
1.CSS盒子模型(一个盒子来封装周围HTML元素):边框、内边距、外边距、内容。盒子不仅仅只是一个div
标签,所有标签都是盒子
1)边框(border)
border-width:像素值;
border-style:solid(实线边框)、dashed(虚线)、dotted(点线)
border-color
border-top(上边框)
border-left(左边框)
border-bottom(下边框)
border-right(右边框)
表格细线边框:
border-collapse:collapse(合并、塌陷,边框重叠)
2)内边距(padding)
上、左右、下
padding: px px px;
上下、左右
padding: px px;
没有宽度的盒子,作用内边距无法撑开
3)外边距(margin)
块级盒子水平居中:盒子必须指定宽度;左右外边距设置为auto
2.CSS圆角边框
border-radius(具体数值/百分比)
左上角
border-top-left-radius
3.CSS盒子阴影
box-shadow
box-shadow: inset hoff voff blur spread #000;
| | | | |
外->内 水平 垂直 距离 尺寸大小
注意
阴影默认为外阴影(outset),但是这个属性值不能写在box-shadow属性内,否则阴影无效
盒子阴影不会占用空间,也就是不会影响盒子的排列
二、今日问题:
如何让ul中的li标签居中,并跟着其中文字改变位置
三、解决方式:
方式:百度
内容:
ul li::marker {
color: ;
}
ul li {
list-style-position:inside;
}
|