css层叠样式

最新推荐文章于 2024-07-09 22:33:51 发布

yjx_43750162

最新推荐文章于 2024-07-09 22:33:51 发布

阅读量361

点赞数

分类专栏： CSS 文章标签： css层叠样式

本文链接：https://blog.csdn.net/weixin_43750162/article/details/86532397

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器
用法：
标签名{属性1:属性值1;属性2:属性值2; 属性3:属性值3; }
优点：能快速为页面中同类型的标签统一样式。
缺点：不能设计差异化样式。

类选择器

类(类型)选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器最大的优势是可以为元素对象定义单独或相同的样式。

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器和类选择器区别

在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

后代选择器

写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。

子代选择器

写法：把父级标签写在前面，子级标签写在后面，中间跟一个 &gt（大于号）。

组合选择器

如果某些选择器定义的样式完全相同，或部分相同，就可以利用组合选择器为它们定义相同的CSS样式，只要逗号隔开的，所有选择器都会执行后面样式

链接伪类选择器

link：未访问的链接
visited：已访问的链接
hover：鼠标移动到链接上
active：选定的链接
before：该伪类表示的是在某一个元素内容之前添加新的内容
after：该伪类表示的是在某一个元素内容之后添加新的内容

盒子模型

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

盒子边框

border : border-width || border-style || border-color
边框属性—设置边框样式（border-style）
常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

内边距

padding属性用于设置内边距。是指边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
1个值：上下左右边距
2个值：上下边距左右边距
3个值：上边距左右边距下边距
4个值：上内边距右内边距下内边距左内边距

外边距

margin属性用于设置外边距。指的是边框到边框之间的距离
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边
取值顺序跟内边距相同。

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方
法如下：
1、使用这种特性
2、设置一边的外边距，一般设置 margin-top
3、将元素浮动或者定位

外边距实现盒子居中

margin: auto;

清除外边距

body{
margin: 0px;
	}

margin-top的塌陷

margin-top的塌陷的解决方法
（1）给父元素设置边框
（2）给父元素设置overflow:hidden
（3）

（id名称或类名或标签名称）：before{
content：" ";
display:table;
}

元素溢出（overflow）

visible : 　不剪切内容也不添加滚动条。
auto : 　超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

块级元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><dt>等

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。

行内元素

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。

常见的行内元素有<a>、<span>

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置 font-size 为 0，内联元素自身再设置 font-size
3、设置margin值。

行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
子元素是内联块元素，父元素可以用 text-align 属性设置子元素水平对齐方式，用 line-height 属性值设置子元素垂直对齐方式

标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

居中方式

水平居中方式：text-align：center。
垂直居中方式：inline-height=高度。
（1）利用text-align 实现块元素水平垂直居中
（2）利用padding设置,且父元素和子元素的大小一致
（3）利用position和margin进行元素水平垂直居中
（4）利用position进行元素的水平垂直居中

{
left：0；
top：0；
bottom：0；
right：0；
margin：auto；
}

图片居中方式：vertical-align: middle;

浮动

文档流

文档流，是指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

left：元素向左滑动
right：元素向右滑动
none：元素不滑动
浮动的目的就是为了让多个块级元素同一行上显示。
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
15
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直 margin 的合并

清除浮动

（1）给父元素添加overflow：hidden
（2）在最后一个子元素的后面加一个空的 div，给它样式属性 clear:both；
（3）

选择器：after,选择器:before{
				content: ' ';
				display: table;
		    	}
			    选择器:after{
				clear: both;
			   }

定位

和定位一起使用的属性有
left（左侧偏移量，定义元素相对于其父元素左边线的距离）
top（顶端偏移量，定义元素相对于其父元素上边线的距离）
right（右侧偏移量，定义元素相对于其父元素右边线的距离）
bottom（底部偏移量，定义元素相对于其父元素下边线的距离）

定位方法

static：自动定位（静态定位）
当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
relative（相对定位）：生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute（绝对定位）：生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对
或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相
对于 body 元素进行定位。
fixed（固定定位）：生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。