CSS属性之浮动&文本&列表&边框

一、浮动

显然标准流已经无法满足需求,这就要用到浮动。标准文档流,在页面中独占一行,自上而下排列,也就是传说中的流。浮动可以理解为让某个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、案例:制作三角形    

  

   

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值