1.标准流和display属性
1.标准流:浏览器对标签默认的布局方式就是标准流
2.标准流则:
块级:a.块级标签一个占一行(不管标签的宽度是否是浏览器宽度)
b.默认宽度是父标签的宽度,默认高度是内容的高度
c.直接设置宽高有效
行内块标签:a.多个行内块可以在一行显示
b.默认的宽高就是内容的宽高
c.直接设置宽高有效
行内标签:a.多个行内块可以在一行显示
b.默认的宽高就是内容的宽高
c.直接设置宽高无效
3.display属性:转换标签的性质
block:块级
inline:行内
inline-block:行内块
注意:行内块标签和其他标签之间默认有间隙,而且这个间隙无法消除
2.浮动
1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动.浮动会让标签脱流.
浮动的目的就是让竖着显示的可以横着来(针对块)
2.浮动的效果:
a.所有的标签浮动后,一个可以显示多个;默认的宽度是内容的大小;可以设置宽度和高度
b.一行显示不了的时候才会自动换行
3.注意事项:
a.如果同一级的标签,后面的需要浮动,前面也要浮动,否则可能会出现显示问题
b.浮动的标签不占池底位置,只占水面的位置;不浮动的既占池底又占水面
文字环绕效果:
被环绕的标签浮动,文字对应的标签不浮动.就会自动产生文字环绕的效果
3.清除浮动
清除浮动:清除浮动不是将标签的浮动给去掉,而是清除因为浮动产生的高度塌陷的问题
高度塌陷:父标签不浮动,子标签浮动,并且不设置父标签的高度,就会产生高度塌陷的问题(父标签)
2.
方案一:添加空盒子,在高度塌陷的标签(父标签)的最后添加一个空的div,并设置样式clear值为both
方案二:给父标签添加样式overflow的值为hidden
方案三:万能清除法
4.定位
CSS中可以通过left,right,bottom,top属性来设置标签到上下左右的距离(但是默认情况下这些值不是都有效的)
想让定位属性有效,必须通过position属性设置参考对象.
1.position
initial:默认值,没有相对定位
absolute:相对第一个非static/initial父标签进行定位
relative:相对于自己在标准流中位置来定位.当标签本身不希望去定位,只是想让自己的子标签可以相对本身来定位的时候使用
fixed:相对于浏览器定位
sticky:当网页的内容不超过一屏(不滚动)的时候,就按照标准流进行定位.超过了就相对浏览器定位
2.注意:如果想要设置right值要保证相对标签的宽度是确定的.如果想要设置bottom值就要保证相对对象的高度是确定的.
3.技巧:当遇到某个方向定位死活都无效,可以尝试让这个标签浮动,然后再定位
5.盒子模型
html中所有可见的标签都是一个盒子模型:包括长和宽决定内容的大小,padding,border,margin四个部分组成.
其中内容,padding,border是可见,margin不可见
1.内容:设置width和height影响的就是内容部分的大小.添加子标签,添加内容都是放在内容部分的
2.padding:在内容的外围,可见部分,如果标签有背景颜色,那么这个部分的颜色和内容的一致
3.border:边框,border是在padding的外围,如果没有padding就在内容的外围,可见部分.可以设置颜色和大小
4.margin:
6.其他常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.字体相关的属性
* 字体颜色:color
* 字体大小:font-size
* 字体名:font-family
* 字体加粗:font-weight
* 字体倾斜:font-style
*
*/
p{
font-family:"微软雅黑" ;
font-weight:900 ;
font-style:oblique;
}
/*2.对齐方式:text-align
* left:左对齐
* right:右对齐
* center:水平方向居中
* */
p{
text-align: center;
}
/*3.行高:line-height
* 设置一行的高度
* */
p{
/*一行内容在垂直方向上居中,可以通过将line-height的值设置为和height的值一样*/
line-height: 100px;
}
/*4.文本修饰:text-decortion
* none:取消修饰
* underline:下划线
* overline:上划线
* line-through:删除线
* */
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
/*5.首行缩进:text-intent
* 注意单位是:em(表示空格)
* */
p{
text-indent: 2em;
}
/*6.字间距:letter-spacing
单位可以是:px,em,%
*
* */
p{
letter-spacing:2px;
}
ul{
/*list-style-type*/
/*list-style-image: url(img/cat.jpg);*/
/*list-style-position: ;*/
}
/*8.背景图片
background:图片地址,是否平铺 x方向的坐标 y方向的坐标 背景色
* */
div{
width: 500px;
height:500px;
background: url(img/cat.jpg) no-repeat;
}
/*9.设置圆角
radius
* */
div{
border-bottom-right-radius: 30px;
}
</style>
</head>
<body>
<a href="">百度一下</a>
<p style="background-color: skyblue;height: 100px;">我是段落:hello world</p>
<ul>
<li>数学</li>
<li>语文</li>
</ul>
<div id="">
</div>
</body>
</html>
网友评论