li小圆点样式设置
list-style: 样式x; 样式x内容有以下几种: none 去掉圆点 circle 空心圆 decimal 数字 square 正方形
body默认外边距margin设置
body { margin: 0px; padding: 0; }
外边距妙用:居中元素
margin: 0 auto;
元素(盒子)具体大小计算
盒子实际大小 = margin+border+padding+内容宽度
盒子(div为例)画圆(依据这种画法,可以画出各种div的变形情况):
/*圆角: 左上 右上 右下 左下 顺时针方向 border-radius: 50px 50px 50px 50px; 圆圈: 圆角 = 半径*/ div { width: 100px; height: 100px; border: 5px solid red; //只设置一个参数的情况,代表四个角都是100px。即可画成一个圆 border-radius: 100px; }
块级元素特点
1.独占一行(前后都有换行符)
2.高度、宽度、内外边距个方向可以自由控制
3.默认宽度是父容器的100%
4.里面可以放行内元素、行内块元素或块级元素(注:文字类标签里面不能放块级元素)
行内元素特点
1.一行可以有多个行内元素(前后无换行符)
2.同行的多个元素之间有间隙,但可以通过设置margin值进行解决
3.不能单独设置宽高,元素大小是根据元素内文本决定
4.margin属性:竖直方向无效、水平方向有效
5.padding属性:竖直方向、水平方向有效
6.行内元素内只能放文本或者行内元素(注:a标签可以放块级元素)
行内块元素特点
1.相邻的行内元素在一行上,一行可以有多个行内元素,但之间有空隙
2.默认的宽度由内容决定,但是可以设置其宽度、高度
3.各方向的margin和padding都有效
父盒子塌陷问题解决办法之一
利用clear进行清除浮动元素
clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none;
父盒子塌陷问题解决办法之二
增加父级元素的高度(粗暴)
父盒子塌陷问题解决办法之三
在父级元素之前增加一个空的div标签,用于清除浮动
<style>
div {
margin:10px;
padding:5px;
}
#father {
父元素自己的基础样式
}
</style>
父盒子塌陷问题解决办法之四
在父级元素样式中增加一行:
overflow:hidden;
父盒子塌陷问题解决办法五(推荐)
在父类添加一个伪类:afte #father { border: 1px #000000 solid; } #father:after { content: ''; display: block; clear: both; }
display和float对比
display:方向不可以控制。按照元素特性进行排列(常用于解决一行内的元素排列)
dloat:浮动起来的元素会脱离标准文档流。所以需要解决父级边框塌陷的问题
相对定位特性
相对定位是相对于原来的位置,进行指定的偏移。
相对定位:仍然是在标准文档流中,原来的位置会被保留(具体的可以此专栏的其他文章总结)
绝对定位特性
1.没有父级元素的前提下,相对于浏览器定位
2.假设父级元素存在定位,通常会相对于父级元素进行偏移
3.绝对定位移动,是在父级元素范围内移动
强制显示优先级
z-index: 1;