一、浮动
显然标准流已经无法满足需求,这就要用到浮动。标准文档流,在页面中独占一行,自上而下排列,也就是传说中的流。浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。
1.float: left/right/none(无浮动);
2.浮动的目的:就是让竖着的元素进行横向排列,也就是能让元素和元素并排显示
3.浮动的显示规则:浮动对象会向左或者右移动直到遇到边框(border)、填充值(padding)、外边界(margin)或者另一个块元素为止。
4.浮动属性只能控制元素在水平方向上移动
5. 浮动属性会使当前的元素脱离文档流(网页布局),初始位置不存在,后面的元素就会补上,初始的网页布局就会被破坏
6.浮动属性的停止条件
(1)设置浮动属性的元素不会跑出当前的父级盒子,碰到父级元素的边框就会停止浮动
(2)碰到前面一个含有浮动属性的元素也会停止浮动
7.当子级元素的宽度大于父级元素的宽度时候,最后一个浮动元素会慢慢的往下移动直至找到足够的空间
8.清除浮动语法:
clear : none | left | right | both
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
注:只针对自身标签起作用
二、文本属性
1:文本大小:font-size
说明:
(1)属性值为数值型时,必须给属性值加单位,属性值为0时除外(html属性值单位是可以省略的)
(2)浏览器中默认的字体大小是16px
(3)市场上浏览器特别多,之间存在差异,为了减少差异带来的问题,规定12px是浏览器显示的最小值
(4)建议设置字体为偶数
(5) 除了常见的px单位 还有以下
1) pt:磅 硬件设备(9pt=12px;)
2) em:相对单位 相对的是父级元素(首航缩进时用) 1em = 16px
3) rem:相对单位 相对的根元素html(移动端布局中)
4)使用绝对大小关键字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2.文本颜色 color
(1)法定的属性值: red、green、blue...
(2)用十六进制表示颜色值:
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
1) 以#开头 有六位字符(0123456789abcdef) 忽略大小写
2) # 00 00 00 三原色
3) 当六位字符是一样的时候可以简写为三位 #000000 => #000
4) 取字体颜色: ps中吸管工具
(3)rgb(red,green,blue) 0~255之间
(4)rgba(red,green,blue,alpha) 透明度 0~1
拓展: 透明的使用
rgba() 某个元素通明
opacity 0~1 所有元素透明
3.文本类型 font-family
(1)在浏览器中中文汉字默认的字体类型是微软雅黑
(2)属性值可以是中文 也可以是英文
(3)中文:属性可以不加引号 规范是需要加引号的
(4)英文:有多个英文单词需要加引号,只有一个英文单词可以不加引号
4.加粗属性 font-weight
(1) 常规属性值 100~900之间的整百数 100~500表示正常字体 600~900表示加粗字体
(2) 法定属性值 bold 加粗的 bolder 更粗的
(3) 重点:normal 正常的 不想用加粗标签的效果 只想要标签而已
5.倾斜属性 font-style
(1)italic 倾斜的
(2)oblique 更倾斜的
(3)normal 正常的
6.文本行高属性 line-height
原理:基线对齐
(1)当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;
(2)当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上;
(3)当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下(IE6及以下版本存在浏览器兼容问题)
7.文字属性简写:font:12px/24px "宋体";
(1)font属性的简写:字号,行高,字体
font-size:12px; line-height:24px; font-family:”宋体”;
(2)font属性的简写:
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family
注意:
(3)简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。
(4)顺序不能改变,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight,font-style,他们会使用缺省值(默认值)。
(5)font-weight和font-style可以互换位置 没有需求可以不写
(6)font-size和line-height是固定的 不可以互换位置
(7)font-family必须得写 默认为微软雅黑
8.水平方向属性 text-align
属性值:left right center justify 两端对齐
9、文本修饰 text-decoration:
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
10:首行缩进
1)text-indent可以取负值;
2)text-indent属性只对第一行起作用。
11、字间距、词间距
字间距{letter-spacing:value;}控制英文字母或汉字的字距。
词间距{word-spacing:value;}控制英文单词词距。
三、列表属性
1.改变列表的符号样式 list-style-type
(1)默认值 disc 实心圆
(2)circle 空心圆
(3)square 实心方块
(4)none 无 清除列表的默认符号 列表的符号是有兼容问题的 在某些低版本中符号是显示不出来的
2.使用图片作为列表的符号 list-style-image
url(所使用图片的路径及全称)
3.设置默认符号的位置 list-style-position 定位
inside
outside 默认值
4.重点: list-style:none
四、边框属性
1、border:边框宽度 边框风格 边框颜色;
border:5px solid #ff0000
边框:border,网页中很多修饰性线条都是由边框来实现的。
边框宽度:border-width:数值+单位
边框颜色:border-color:
边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框,
2、前端方向默认是顺时针的 top、right、bottom、left
(1)改变某一个方向上的边框颜色 border-方向值-color
(2)改变某一个方向上的所有样式 border-方向值
(3)某些标签自带边框需要 清除边框 border-方向值:none
border-bottom:边框宽度 边框风格 边框颜色;底边框
border-left:边框宽度 边框风格 边框颜色;左边框
border-right:边框宽度 边框风格 边框颜色;右边框
border-top:边框宽度 边框风格 边框颜色;上边框
3、案例:制作三角形