cssday03 文本字体，表格，列表，css属性过渡效果，浮动(float)，定位(position)

最新推荐文章于 2021-08-04 09:32:37 发布

zh__quan

最新推荐文章于 2021-08-04 09:32:37 发布

阅读量472

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/zh__quan/article/details/81535729

版权

HTML+CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.边框尺寸

1.轮廓线
       outline
       默认情况下文本框密码框都带有轮廓线
       取消轮廓线 outline:none;
   2.box-sizing
       改变元素尺寸的计算方式
       1.默认取值：content-box
           元素实际尺寸由margin + border + padding + width/height 计算得到
       2.取值 border-box
           元素的实际尺寸 width = margin + border + padding + 内容;
           一旦为元素设置边距和边框，会压缩内容区域

2.背景属性

   background-color背景颜色
   background-image背景图片地址
   background-repeat是否平铺
   background-position背景位置
   background-attachment背景固定还是滚动
   background:背景颜色背景图片地址背景平铺背景滚动背景位置
background-size:背景图片尺寸

背景图片(image)
   background-image : none | url (url)

   background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

小技巧：我们提倡背景图片后面的地址，url不要加引号

背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y

   repeat : 　背景图像在纵向和横向上平铺（默认的）
   no-repeat : 　背景图像不平铺
   repeat-x : 　背景图像在横向上平铺
   repeat-y : 　背景图像在纵向平铺

背景位置(position)
background-position : length || length
background-position : position || position

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

   1. position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
   2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
   实际工作用的最多的，就是背景图片居中对齐了。

相对于内容框来定位背景图像
background-origin 属性规定 background-position 属性相对于什么位置来定位。
background-clip 属性规定背景的绘制区域。

背景附着
background-attachment : scroll | fixed
设置或检索背景图像是随对象内容滚动还是固定的。

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

背景简写
background:背景颜色背景图片地址背景平铺背景滚动背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)
background: rgba(0,0,0,0.3);
背景图片尺寸
属性 background-size
取值：
1.500px 500px 分别设置背景图片宽高
2.100% 100% 采用当前元素的尺寸占比作为背景图片的尺寸
3.cover 表示对图片等比缩放至完全覆盖元素，多出部分裁剪
4.contain 表示对图片等比缩放至刚好容纳图片，不足的部分不管
5.auto 自动

3.文本/字体属性

1.指定字体
       font-family : "Microsoft YaHei","微软雅黑","黑体",Arial;
       注意：当字体名称是中文，或者是由多个英文单词组成的，都需要添加引号
   2.字体粗细
       font-weight:
       取值：
           1.lighter(100)/nomal(400)/bold(700)
           2.采用数字，无单位，取值100-900,值越大，字体越粗
   3.字体大小
       font-size
       取值 16px
   4.字体样式(斜体)
       font-style
       取值：
           1.normal 默认值，标准样式
           2.italic 斜体
           3.oblique 字体倾斜显示效果与斜体一致
   5.行高
       line-height
       常用于设置文本垂直居中
   6.字体属性简写
       使用简写，有必填的属性值 family
       font:style weight size family;
       font:family size/line-height;
       e.g.
           font:Arial 16px/20px;
       注意：font-weight font-style 必须设置在font-size之前
           同时设置字体大小和行高，必须写成一个属性值存在，size/line-height
   7.文本颜色
       color
       取值方式有三种
           1.预定义的颜色值，red，green，blue等。
           2.十六进制，如#FF0000，#FF6600，#29D794等(最常用)
           3.3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
   8.文本装饰线
       text-decoration
       取值：
           1.underline 下划线
           2.none 取消装饰线
           3.overline 上划线
           4.line-through 删除线
   9.首行缩进
       text-indent
       取值像素值或者以em为单位 1em = 元素字体大小
10.line-height:行间距
       三种方式分别为像素px(最常用)，相对值em和百分比%
11.text-align:水平对齐方式
       left：左对齐（默认值）
       right：右对齐
       center：居中对齐
       (是让盒子里面的内容水平居中，而不是让盒子居中对齐)
垂直居中：设置元素高度height 与行高line-height 保持一致

11.text-indent:首行缩进
数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

4.表格属性

1.表格添加边框
       border:1px solid black;
   2.表格边框合并
       属性 border-collapse
       取值：
           1.separate (默认)
           2.collapse (边框合并)
   3.边框边距
       设置单元格之间的距离
       属性：border-spacing
       取值：
           1.指定一个数值
               水平与垂直方向上间距相等
           2.指定两个数值
               分别设置水平方向与垂直方向上单元格之间的距离
       注意：属性必须在边框分离的情况下使用

border-collapse:
border-spacing: 10 20

5.列表属性

1.列表特征：
       1.无序列表和有序列表存在上下边距
       2.存在左边内边距
       3.具备项目符号
       4.列表项垂直排列
   2.列表属性
       属性
           1.list-style-type 设置项目符号
           2.list-style-position:
               设置项目符号的位置默认outside 项目符号与内容框分离
                                   设置inside 项目符号调整到内容框中
           3.list-style-image：url()
               自定义项目符号
       属性简写：
           list-style : type image position;
           常用的取消列表项目样式：
           list-style:none;

       list-style-type: square;
       list-style-position: inside;
       list-style-image: url('../web001/img/northStar.jpg');

6.过渡效果

1.过渡效果指的是css属性值在一段时间内平缓变换的效果
   2.语法
       1.指定过渡属性
           指定哪个属性值在变化的时候使用过渡效果
           transition-property:
           取值：
               1. all 但凡能够使用过渡效果的属性值在变化时一律使用过渡来体现
               2. 单独设置属性，指定某一个属性在变化时使用的过渡效果
                   允许使用过渡效果的属性：
                   1.颜色相关的属性
                   2.取值为数字的属性
       2.指定过渡时长
           transtion-duration
           指定在多长时间内完成过渡效果
           取值：以s或者ms为单位的数值
               1s = 1000ms
               500ms = 0.5s = .5s
       3.指定过渡的速度时间曲线函数
           transition-timing-function
           取值：
               1.ease默认值慢速开始，快速变快，缓慢结束
               2.linear匀速变化
               3.ease-in 慢速开始，加速结束
               4.ease-out 快速开始，慢速结束
               5.ease-in-out 慢速开始和结束，中间先加速后减速的过程
       4.指定过渡效果的延迟时间
           等激发过渡效果之后，等待多久开始执行
           tarnsition-delay
           取值以s或者ms为单位的数值
       5.属性简写
           transition:property duration
           timing-fun delay;
       6.练习
           创建200*200的元素，背景为红色
           鼠标悬停时：
               1.尺寸变为400*400
               2.背景颜色变成橘色
               3.变成圆形
           属性值的变换需要5s内完成

7.布局方式(重点掌握)

1.布局方式影响整体结构划分和元素的显示样式
   2.布局方式分类
       1.文档流布局/普通流/静态流/
           默认的布局方式
           元素按照书写顺序及元素类型，从上到下，从左到右排列
       2.浮动布局(重难点)
       3.定位布局
           1.绝对定位
           2.相对定位
           3.固定定位

3.浮动布局（float）

最常用的布局方式
       1.将元素设置浮动之后，元素会具备以下特点：
           1.元素会脱离文档流，不再占据文档空间
           2.剩余未浮动元素会上前占位
           3.元素浮动时，会停靠在父元素的左边或右边，或者是其他的浮动元素边缘上
           4.元素浮动只能在当前行浮动
           5.浮动可以解决共行问题，也可以解决行内块元素水平间隙的问题
       2.语法
           属性 float
           取值：
               1.left 元素向左浮动，碰到其他元素的边框时停止
               2.right 元素向右浮动，碰到其他元素的边框停止
               3.none 默认值，元素未浮动

版心和布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

       3.浮动引发的效果
           1.如果父元素中无法容纳浮动元素，浮动元素会自动换行显示
           2.元素一旦设置浮动，便可以设置宽高，主要针对行内元素
           3.元素一旦浮动，默认尺寸由内容决定
           4.文字环绕效果
               如果前一个元素设置浮动，后面元素会上前占位，并且文本后面元素的文本会围绕浮动元素显示

清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

选择器{clear:属性值;}
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

额外标签法
<div style=”clear:both”></div>

父级添加overflow属性方法
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。

使用after伪元素清除浮动

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {*zoom: 1;} /* IE6、7 专有 */

使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

4.定位布局(position)

1.属性 position
    2,取值：
        1.relative 相对定位
        2.absolute 绝对定位
        3.fixed 固定定位
        4.static 静态布局(默认值)
    3.偏移属性
        作用：配合已定位元素实现位置移动
            元素设置position属性为relative/absolue/fixed 都被称为已定位元素
        属性：top/right/bottom/left
        取值：像素值
            top:以元素上边为基准进行偏移
            right:以元素右边为基准进行偏移
            bottom:以元素下边为基准进行偏移
            left:以元素左边为基准进行偏移

4.相对定位

1.元素会相对于它在文档中的原来位置进行偏移
        2.练习
            创建一个页面
            创建ul及四个列表项li
                每个li 100*30,设置背景颜色，左浮动，10px的右外边距
            使用相对定位实现:
                当鼠标悬停在li上，li元素实现向左上偏移10px
        3.元素使用相对定位进行偏移，在文档中始终占据原本的位置,一经偏移，会遮挡其他元素

5.绝对定位(重点)

1.特点：
            1.元素使用绝对定位，会脱离文档流，在文档中不再占位
            2.绝对定位的元素会参照距它最近的一个已经定位的祖先元素进行偏移
            3.如果没有已经定位的祖先元素，元素会参照body进行定位
        2.语法
            属性 position
            取值 absolute
            配合偏移属性实现定位
        3.注意：
            1.由于绝对定位元素会脱离文档流，所以在使用绝对定位时，一般按照父元素相对定位，
              子元素绝对定位的原则进行布局 --- 父相子绝
            2.元素脱离文档流之后，都可以设置宽高(针对行内元素)
       4.绝对定位的盒子水平/垂直居中
            1. 首先left 50% 父盒子的一半大小
            2. 然后走自己外边距负的一半值就可以了 margin-left。

6.固定定位

1.元素一旦设置固定定位，会被固定在浏览器窗口的某个位置，不糊跟随网页滚动而发生位置的改变
        2.语法
            属性 position
            取值 fixed
            配合偏移属性进行定位布局
        3.注意
            1.固定定位的元素永远都是相对于body实现位置初始化,不随滚动条滚动
            2.元素设置固定定位，就会变成块级元素

元素堆叠次序

1.已定位的元素们堆叠在一起的排列顺序
        2.语法
            属性 z-index
            取值数字，无单位，值越大，元素越靠上
        3.注意：
            1.只有已经定位的元素 position:
                relative / absolute /
                fixed,才能设置z-index,否则不起作用
            2.父子元素之间，无论如何修改z-index，永远都是子元素在上，父元素在下
            3.如果z-index取值相同，后来者居上
            4.后面数字一定不能加单位。