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