边框
border-style:solid;
border-1px;
border-color:red;
简写
border:1px dotted red
单独
border-top-style:solid;
border-top:1px dotted red;
边框圆角
border-radius:50%;
display
display的值:
none:影藏标签,不占空间
visibility:hidden;影藏标签,占用空间
inline:将标签做成内敛样式
block:将标签做成块级样式
inline-block:同时具备两种标签的一些特点,能够设置高度宽度,并且不独占一行
盒子模型
conrent 内容
padding 内边距 内容与边框之间的距离 padding:10px 20px;上下 左右 padding: 1px 20px 20px 30px;上右下左
border 边框
margin 外边距 与其他标签之间的距离
浮动float
布局用的,设置了浮动的标签会脱离正常的文档流,会造成父级标签塌陷
float: left; 左浮动
float:right; 右浮动
解决塌陷:
1.父级标签设置行高
2.伪元素选择器清除浮动
.clearfix:after{
content:'';
display:block;
clear:both;}
父级标签class='clearfix'
overflow溢出:
overflow:auto;出现滚动条
overflow:hidden;影藏内容
position定位
position:relative;相对定位,保留原来的空间,相对自己原来的位置移动
position:absolute;绝对定位,不保留原来位置的空间,按照父级标签或者祖先标签中有设置了position为相对定位的标签,如果有,按照它的位置移动,如果没有按照body移动。
position:fixed;固定定位,根据浏览器窗口位置来定位
position:static。默认
控制层级z-index
z-index的值越大,就在上面。
透明度opacity
标签的透明度
rgba(255,0,0,0.3) 单独设置的某个属性的透明度。
锚点
设置:
<a name=“top” >锚点位置</a>
<div id=“top”>锚点位置</div>
<a href="#top"> </a>