初识CSS-常用样式

最新推荐文章于 2022-06-13 00:19:00 发布

qq_42837379

最新推荐文章于 2022-06-13 00:19:00 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/qq_42837379/article/details/109249510

版权

字体属性

**行高 line-height **
设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
| px 像素值 | 设置的行高的具体像素值
| 百分比数值 | 设置的本身字号像素值的百分比

字体综合font
1.字号、字体
2.字号 /行高、字体 重点是字号和行高之间使用 /
3.加粗和斜体两个值之间可以互换位置、字号、行高、字体不能更改位置。

文字属性

盒模型属性

书写元素内容区域 width+height
盒子可以实体化的区域 width + height + padding + border
盒子实际占位的位置 width + height + padding + border + margin

内边距padding 、外边距margin
内边距padding：设置的是元素的边框内部到宽高区域之间的距离。
外边距margin：设置的是盒子与盒子之间的距离。
四值法上右下左 padding : 10px 20px 30px 40px;
三值法上左右下
二值法上下左右
单值法四个值相同

盒模型属性

清除默认样式
1.大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
2.

和
两种列表有默认的列表前缀，清除list-style属性
3.标签的默认样式，顺带设置页面中常用的a的公共样式：color和text-decorstion
4.清除默认加粗效果:设置font-weight

height应用
根据不同的需求，高度属性可以设置也可以不设置。
如果设置了高度，盒子占有的高度位置就确定了，后面的同级元素就会紧挨着加载。
如果不设置高度，会根据标签内容高度自动撑开。
以
标签为例，根据情况不同选中是否设置高度。
overflow属性
设置了高度的盒子，如果内部元素的加载高度超过了父级，会出现溢出效果。
| visible | 默认值，可见的可视的，一处部分显示的 |
| hidden | 溢出部分直接隐藏，隐藏超过边框范围的内容 |
| scroll | 溢出的部分出现滚动条，可以拖动滚动条看到溢出部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条
| auto | 自动的，如果没有溢出就正常显示。如果有溢出，溢出的方向自动出现滚动条

在这里插入图片描述
文本居中
文本水平居中 text-align 垂直居中 line-height
元素水平居中 margin：0 auto；垂直居中给父级元素设置相同的上下边距

父子盒模型
父元素的width >= 所有子元素width + padding + border + margin

margin塌陷现象
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部
同级元素塌陷：大的margin吃掉小的在这里插入图片描述
父子元素塌陷 :

解决margin塌陷问题的方法
1.同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
2.父子元素：让两个边距不要相遇，中间可以使用父元素border或padding 将边距分隔开；更加常用的方法，父子盒子模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来；
另外注意：水平方向的margin没有塌陷效果

标准文档流

标准文档流：指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容位置也会随着发生变化
微观现象
1.空白折叠现象。
2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3.自动换行，元素内一行内容写满元素的width时会自动进行换行。在这里插入图片描述
元素等级
块级元素：大部分容器级标签包括p标签都是块级元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行内元素：大部分的文本及标签比如 a,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
行内块元素： (img，button,input，textarea,select), img等

脱离标准流
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位

浮动属性

浮动定义
1.浮动 (float)：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
float : right / left
在这里插入图片描述
浮动的性质
1.浮动的元素脱离标准流
标准文档流特点：区分行块。块级元素：可以设置宽高，必须独占一行。行内元素：不能设置宽高，可以并排一行。
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
2.浮动的元素依次贴边
浮动前在这里插入图片描述
浮动后：并排一排，父元素宽度足够

3.浮动的元素没有margin塌陷
margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有margin塌陷现象

4.浮动的元素让出标准流元素
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素
在这里插入图片描述
在IE6、7浏览器中，有兼容问题

5.字围现象

浮动问题
浮动的问题一：标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。在这里插入图片描述

浮动的问题二：父元素没有高度，会影响后面元素的标准流位置，如果福哦的那个的子元素足够高，有可能影响到后面浮动的贴边。
在这里插入图片描述
清除浮动方法
清除浮动一：给标准流的父元素强制给一个合适的高度height
解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

解决：浮动元素影响后面元素标准流位置和贴边。
问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。
在这里插入图片描述
清除浮动三：隔墙法
外墙法：在两个大的父盒子之间，添加一个空的

标签，标签上带有clear：both属性
在这里插入图片描述

内墙法：在父元素内部，所有的浮动子元素后面添加一个空的

元素，标签高度为 0，添加 clear 属性。
在这里插入图片描述

清除浮动四：伪类

.clearfix:after{
content:"0";         /*添加一个文字内容*/
display:block;       /*将文字转化为块级元素*/
height:0;            /*将盒子高度固定为0，避免影响父盒子高度*/
clear:both;          /*清除前面浮动影响*/
visibility:hidden;   /*将创建的元素占位置隐蔽*/
}

清除浮动五：溢出隐藏
overflow：hidden

总结如果父元素高度是固定的，建议使用height属性解决
如果父元素告诉需要自适应，建议使用overflow属性解决浮动问题

CSS伪类选择器

要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。

a:link{ color : gray }       /*访问前状态*/
a:visited{ color ：cyan }    /*访问后状态*/
a:hover{ color : red }       /*鼠标悬浮状态*/
a:active{ color : yellow }   /*鼠标点击状态*/

背景属性

-背景颜色 background-color
-背景图片 background-image 属性 url(图片路径)
-背景重复 background-repeat
| repeat | 重复，默认属性值，表示会使用背景重复加载填满整个盒子背景区域
| no-repeat| 不重复，不论背景图是否大于盒子范围，都只加载依次图片
| repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
| repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
-背景定位 background-position 主要用于设置不重复的图片在背景区域的加载开始位置
单词表示法水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
像素表示法水平垂直 border以内的
百分比表示法 100%代表的数值
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
-背景附着 background-attachment
| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
| fixed | 固定的，背景图的定位的参考点从盒子border，以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走

background 属性可以将五个单一属性的值进行合写。属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

background ：url(image) no-repeat center top fixed #fff;

-相对定位 relative
相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置
-绝对定位 absolute 脱离标准文档流
子绝父相、子绝父绝、子绝父固
-固定定位 fixed 脱离标准文档流
-压盖顺序 z-index

qq_42837379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS-常用样式

字体属性粗细font-weight设置文字是否加粗显示。有两种类型：单词类型、数字类型单词类型 | 属性值 | 说明| normal | 默认值，定义批准的字体| bold | 定义粗体字符，b strong标签的默认值| bolder | 定义更粗的字体| ligher | 定义更细的字体数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400normal 700bold字体风格font-style设置字体是否斜体显示。| 属
复制链接

扫一扫