2 - CSS样式

最新推荐文章于 2022-11-08 08:38:21 发布
最新推荐文章于 2022-11-08 08:38:21 发布
阅读量739 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ponsine/article/details/109748925
版权

CSS

一、CSS基本语法

1.1 CSS和HTML的关系

css 为某一个 html 元素设置样式
css 的样式作用在某个 html 元素上

1.2 元素间的关系

子元素
父元素
兄弟元素
祖先元素
后代元素

1.3 CSS使用方式

<!--1. 行内式 使用标签的style属性-->
	 	<p style=" width: 200px; color:skyblue; border:solid 2px pink; ">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ipsum vero nesciunt neque non eum vitae sint, eos labore. Expedita ut magnam, iure maiores cupiditate laboriosam reiciendis quam deleniti atque.
        </p>
<!--2.内嵌式  在head标签中写style标签-->
<style>
        .p1{
            width: 600px;
            color: teal;
            font-size: 22px;
            border: 2px solid greenyellow;
        }
</style>
		<p class="p1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ipsum vero nesciunt neque non eum vitae sint, eos labore. Expedita ut magnam, iure maiores cupiditate laboriosam reiciendis quam deleniti atque.
        </p>     

<!--3. 外联式  单独创建一个css文件,使用link标签引入css文件-->
    <link rel="stylesheet" href="./06.css">
	<h2>CSS外联样式</h2>

<!--外部css文件内容-->
    @charset "utf-8";
    h2{
        color: #f0f;
        text-decoration: line-through;
    }

​ 注意: 外链式和内嵌式的优先级相同 , 遵循css层叠规则 , 行内式的优先级最高 .

1.4 CSS 语法格式

/* 内嵌式和外链式 
先写选择器跟一对{}, 在{}中写css属性*/
选择器1 {
  属性名1:属性值1;
  属性名2:属性值2;
  ...
}
选择器2 {
  属性名1:属性值1;
  属性名2:属性值2;
  ...
}
/*行内式  在标签中写style属性*/
<h2 style="color:red;">zzzzzz</h2>

1.5 CSS注释

/*css注释形式*/

二、CSS基本颜色表示方式

2.1 颜色名 colorName

red orange yellow green ycan blue purple

2.2 rgb方式

计算机三原色: red , green , blue

/*用0-255之间的数字表示各种颜色*/
color: rgb(xx,yy,zz);

/*使用百分比表示各种颜色: 0%-100%*/
background-color: rgb(100%, 40%,10%);

2.3 十六进制数字

/*使用十六进制数字, 每两个数字为一组,原理和rgb相同*/
background-color: #aeaeae;

/*如果三组数, 组内每两个数 是相同的,可以简写*/
background-color: #123;/*相当于 #112233*/

​ 注意:

  • 三原色的数值都是一样 , 表示为灰色;
    • 数值越大 , 灰色越浅 , 如果数字都是最大的 , 表示为白色;
    • 数值越小 , 灰色越深 , 如果数字都是最小的 , 表示为黑色;

三、CSS选择器

3.1 基本选择器

① 标签名选择器
标签名{
    css语句;
}
② id名选择器
/*id名在一个页面中唯一*/
#属性名{
    css语句;
}
③ 类名选择器
/*类名在一个页面中可以多次使用, 同一个标签可以使用多个标签*/
.类名{
    css语句;
}
③ 全局选择器
/*全局选择器选择到页面中的全部元素包括html和body元素,head元素以及嵌套在head元素中的元素,因为在页面中无内容,所有不会被选择到*/
*{
    css语句;
}

3.2 CSS层叠性

层叠性----所有能选择到一个元素的选择器所设置的样式都会作用在元素上

3.3 CSS基本选择器的优先级

  • id选择器 > 类选择器 > 标签选择器 > 全局选择器
  • 优先级相同后面的层叠前面的 , 显示效果是后面的
  • 行内式优先级高于选择器

四、块元素和行内元素

  • 任何一个元素都可以当做一个盒子

4.1 盒子模型的显示模式

  • 块级元素 :
    • 块元素的默认宽度是父元素的宽度
    • 默认高度是内容的高度块元素
    • 可以设置宽高
  • 行内元素 :
    • 行内元素的默认宽度时内容的宽度
    • 默认高度是内容的高度行内元素
    • 无法设置宽高
  • 行内块级元素 :
    • 行内块元素的默认宽度是内容的宽度
    • 默认高度是内容高度
    • 有内容时 , 可以设置宽高

4.2 元素默认的显示模式

块元素:独占一行,可以设置宽高
    格式排版标签: h1~h6 div p pre hr br 
    表单: form 
    表格: table caption tr thead tfoot tbody
    列表: ul li ol tt td
行内元素: 不独占一行,不可以设置宽高
    文本标签: em strong sub sup del ins span 
    超链接:  a 
行内块级元素: 不独占一行,可以设置宽高
    图片元素: img
    表单: input textarea select option button
    表格: td th

4.3 修改元素默认的显示模式

display:block:/*改为块元素*/
		inline;/*改为行内元素*/
		inline-block;/*改为行内块元素*/

五、CSS属性

5.1 字体属性

font-family: 字体族科

	font-family: '华文彩云';
	/* 同时设置多个字体   如果用户端没有第一个字体,就会依次往下找*/
	font-family: '等线','宋体','楷体','华文彩云';
	/* 衬线字体和非衬线字体:
	衬线字体: serif 横竖笔画不等宽 --> 宋体 楷体
	非衬线字体: sans-serif 横竖笔画等宽 --> 微软雅黑 黑体 幼圆
	扁平化设计----->多使用用非衬线字体
	*/

font-size: 字体大小

	/* 字体大小:默认16px 网页的字体大小有最小值12px */
	font-size: 44px;

font-style: 字体倾斜

  /* 字体风格:文字倾斜与否*/
        font-style: normal;	 /* 默认值*/
        font-style: italic;  /* 斜体:使用字体中自带的斜体 推荐使用!!!!*/
        font-style: oblique; /* 斜体:强制变为斜体 */

font-weight: 字体加粗

    /* 字体加粗: 
	100-300 细体
	400-500 正常
	600-900 粗体
    bolder--更粗,一般不用
    */
        font-weight: 400;/*400==normal==正常 */
        font-weight: 700;/*700==bold==加粗  */
        font-weight: lighter;/* 200==lighter==细体*/

font-variant: 字体变形

  /* 字体变形:  
	small-caps: 小型大写字母,把英文全部变成大写,用小写的尺寸表示*/
	font-variant:small-caps;

font: 字体复合属性 , 可以同时设置多个子属性的值

/* 顺序: font-style font-weight font-size font-family
		至少设置font-size font-family 顺序固定*/
font: italic bold 22px '宋体','楷体',serif ;

5.2 字体颜色

color: 设置字体颜色

color: #aeaeae;

5.3 文本属性

5.3.1 letter-spacing / word-spacing
letter-spacing: 设置字母间的距离(包括汉字)
word-spacing: 设置单词之间的距离(汉字无聊)
5.3.2 text-align

设置文本内容在元素内,水平方向的对齐方式

text-align: left;/*左对齐*/
text-align: right;/*右对齐*/
text-align: center;/*居中对齐*/
5.3.3 vertical-align
①设置文本的垂直对齐方式
vertical-align: top/middle/baseline/buttom

 top:/*顶线对齐*/
 middle:/*中线对齐*/
 baseline:/*基线对齐*/
 buttom:/*底线对齐*/

在这里插入图片描述

②用途

第一个用途 : 行内元素或者行内快元素与文本内容在一行显示的时候 , 设置如何对齐

  • 给行内元素或者行内块元素设置 vertical-align

第二个用途 : 设置表格中单元格中文字的垂直对齐方式

  • 给td,th设置 vertical-align 可以控制文本在单元格内的垂直对齐方式
5.3.4 line-height

行高： 第一行文字的中线与第二行文字中间之间的距离。

通过设置行高与元素的高度一致，实现文字在元素内容垂直居中对齐，但是，只适合只有一行文字的情况。

行高可以让文本内容的高度变大，一个元素不设置高度，只设置行高且元素内有文本内容，元素高度与行高大小一致。

font 复合属性，把行高也复合进去了

font: 30px/100px 'Microsoft YaHei';

/* 其中 100px 就是行高 */
5.3.5 text-decoration
  • 设置文本的样式
text-decoration: underline;/*下划线*/
text-decoration: overline;/*顶部线*/
text-decoration: through-line;/*删除线*/
text-decoration: none;/*无样式*/
5.3.6 text-indent
  • 设置文本缩进
text-indent: 2em;/*设置缩进两个默认字体的长度---缩进两格*/

5.4 背景属性

5.4.1 背景颜色
  • 设置背景颜色
background-color: #f90;

​ 注意 : 给body设置背景色是整个页面的背景色

​ 元素默认的背景色是透明 transparent 不是#fff

5.4.2 背景图片
  • 设置背景图片
background-image: url(图片地址);

​ 使用 img 标签引入图片和背景图片有什么区别 ?

  1. img 标签是一个元素，图片本身就是元素； 背景图片可以给任何元素添加背景图。
  2. 如果图片作为网页内容的一部分，建议使用 Img 标签； 如果图片仅仅是修饰，建议使用背景图片。
  3. img 图片是可以被搜索引擎抓取的。
5.4.3 背景重复
  • 设置背景图片是否重复
background-repeat: repeat;/*默认值重复*/
background-repeat: no-repeat;/*不重复*/
background-repeat: x-repeat;/*x轴水平方向重复*/
background-repeat: y-repeat;/*y轴垂直方向重复*/
5.4.4 背景定位
  • 设置背景的位置
/*水平方向值:left center right  垂直方向的值: top center bottom*/
background-position: top center;/*第一个值是水平位置 第二个值是垂直位置*/
background-position: left;  /* 指定一个值: 只指定一个方向,另一个方向默认为居中*/   
background-position: 10px 10px;/*以页面的左上角为坐标原点,往右往下为坐标*/
background-position: 10px; /*设置为具体值时,一个值是水平方向的值,垂直方向center*/
/*百分比设置*/
background-position:  50% 50%:/*百分比调整:
										以背景图片左上角为左边原点找到百分比的点
										以元素的左上角为坐标原点找到百分比的点
										用背景图片的点去和元素的点重合
										两个点重合就是背景所在的位置*/
5.4.5 背景附件

设置背景图片的定位方式

background-attachment: scroll / fixed;

scroll: 默认值，设置背景图位置的时候，元素的左上角作为坐标原点
fixed: 设置背景图位置的时候，视口的左上角作为坐标原点

如果滚动条滚动，元素会跟着滚动，但是视口不会跟着动
5.4.6 背景复合属性

把所有的子属性的值写在一起，用一个css属性代替多个属性

background 复合属性对值没有顺序和数量要求

background: #369 url(../images/bg1.jpg) no-repeat 10px 50px scroll;

5.5 鼠标光标

设置鼠标滑动到元素上之后，光标的样式

cursor: pointer;

值：
	defalut 默认值
	pointer 小手（最常用）
	move	移动图标（用于商品的放大镜）

5.6 列表属性

list-style-type		设置列表项符号
	值： disc、circle .... none(常用)
	
list-style-position  设置项目符号在 li 的里面还是外面
	值： inside
		 outside(默认，在外面)

list-style-image  指定一个图片作为列表项的符号
	list-style-image: url(图片地址)
	
list-style 复合属性，把所有的子属性写在里面，没有数量和顺序要求

/* 常见用法 */
list-style: none;

5.7 表格属性

记忆 border-collspase border-spacing 

table-layout  设置列宽的计算方式
			  值：
			  auto	默认，列宽根据单元里的内容多少计算
			  fixed 列宽与单元格内内容多少没关系，如果入去设置单元格宽度，所有列等宽

border-collspase  设置单元格边框是否合并
				  值：
				  separate 默认，独立
				  collspase 合并
				  
border-spacing  设置单元格之间的距离（类似于 table 的 cellspacing 属性）
				生效的前提：单元格边框不能合并
				
cpation-side	设置表格标题位置
				值：
				top	默认，在表格上面
				bottom	在表格下面
				
				
empty-cells		设置是否隐藏没有内容的单元格1
				值：
				show	默认，显示
				hide	隐藏

注意：

以上五个属性只能设置给 table 元素

常用：

table-layout : 单元格长度

border-collapse : 合并单元格

六、CSS选择器

6.1 后代选择器

/*后代选择器可以同时使用多个选择器进行选择,选择器之间有空格*/
选择器1 选择器2 选择器n{
    css语句;
}

6.2 子元素选择器

/*子元素选择器只选择子元素,不选择其他后代元素*/
选择器1>选择器2>选择器3>选择器n{
    css语句;
}

6.3 群组选择器(并集选择器)

/*多个选择器同时设置相同样式*/
选择器1,选择器2,选择器3,选择器n{
    css语句;
}

6.4 多选择器(交集选择器)

/*同时满足多个选择器的要求*/
选择器1选择器2选择器n{/*选择器之间没有连接符,没有空格*/
    css语句;
}
/*可适用范围
	类名+类名
	标签名+类名
	id相关(id唯一 id用交集选择器基本不用)*/

6.5 选择器优先级

!important > 行内式 > id > 类名 > 标签名 > 全局

6.6 伪类选择器

E:link: 超链接未被激活时状态
E:visited: 超链接访问过后状态
E:hover: 鼠标悬停时元素的状态
E:active: 鼠标按住不动时元素的状态

​ 注意:

​ 伪类选择器一起使用时有顺序 , 按照 link visited hover active 顺序 书写

七、盒子模型

7.1 盒子模型的组成

  • 盒子内容 : 元素内容和元素后代元素显示的区域
  • 内边距 : 内容和边框之间的距离(无内容)
  • 边框 :
  • 外边距 : 外边框不属于盒子内容的一部分

​ 影响盒子大小的设置 : 盒子内容 内边距 边框

​ 不影响盒子大小的设置 : 外边距

7.2 设置元素可见性

/*元素不再占据页面位置*/
display: none;/*元素隐藏*/  


/*元素不可见,但占据页面位置*/
visibility: visible;
			hidden;

7.3 块级元素的默认宽度

  • 如果元素没有外边距 ,那么块级元素的默认宽度跟随父元素的宽度
  • 如果元素有外边距 , 那么内容宽度 = 父元素宽度 - 左右外边距
  • 如果元素本身设置了内边距和边框 , 元素的总宽度不变 , 内容宽度会被挤压

八、盒子模型

8.1 盒子模型的内容区域

8.1.1 设置内容区域的宽高CSS属性
div{
    /*设置width和height是设置的内容区域的宽高*/
    height: 200px;
    width: 500px;
    /* 设置最大宽度和高度
    如果内容宽高小于最大宽高,按照内容的大小显示
    如果元素宽高大于最大宽高,按照最大宽高来显示 */
    max-width: 500px;
    min-width: 500px;
    min-height: 60px;/*min-height在布局时最常用*/
}
8.1.2 内容区域的默认宽度
width的默认属性是auto
8.1.3 设置溢出内容的显示方式
/* 设置内容溢出规则 */
/*默认值 超出部分可视*/
overflow: visible;
/*超出部分隐藏-----可以解决margin塌陷*/
overflow: hidden;
/* 滑轮 */
overflow: scroll;
/* 内容溢出时出现滚轮,不溢出时无滚轮 */
overflow: auto;
/* 垂直方向溢出方式*/
overflow-x:hidden;
/* 水平方向溢出方式 */
overflow-y: hidden;
/* 一个方向设置溢出方式,另一个方向为scroll */

8.2 盒子模型的内边距

8.2.1 内边距的属性设置
 块级元素: 
	/* 一个值: 上下左右 */
    padding: 40px;
    /* 两个值: 上下 左右 */
    padding: 40px 40px;
    /* 三个值: 上 左右 下*/
    padding: 40px 40px 40px;
    /* 四个值: 上 右 下 左*/
    padding: 40px 40px 40px 40px;
行内块和行内元素:
span{
    /* 行内元素设置padding */
    padding: 30px 20px;
    /* 行内元素设置左右padding正常显示
       上下padding会占据其他元素位置 */
    }
.item{
    /* 行内块元素设置 */
    display: inline-block;
    padding: 30px 20px;
    /* 行内块元素设置内边距正常显示 */
        }
8.2.2 内边距规则

​ padding 的默认值是 0 , 不能设置为负值 .

​ 行内元素设置上下的内边距，无法使盒子的占地位置变大，不建议给行内元素设置上下内边距

8.3 盒子模型的边框

8.3.1 边框相关的CSS属性
 /* 边框颜色 */
border-color: skyblue;
/* 边框宽度 */
border-width: 2px;
/* 边框风格 */
/* 点线 */
border-style: dotted;
/* 双实线 */
border-style: double;
/* 实线 */
border-style: solid;
/* 虚线 */
border-style: dashed;
/* border复合属性 */
border: 2px solid pink;
/* 去掉边框 */
border: none;
/* 只设置一个方向的边框 */
border-bottom-color: pink;
border-bottom-style: solid;
border-bottom-width: 2px;
...
/* 一个方向的复合属性 */
border-bottom: 2px solid pink;
/* 设置三个方向的边框---上边框不显示 */
border: 2px solid pink;
border-top: none;
8.3.2 背景位置和边框关系
背景颜色包括边框的背景颜色,但是边框的颜色覆盖了背景颜色
背景图片和边框不重合 背景图片冲内边距边开始覆盖

九、外边距

9.1 设置外边距

/* 设置外边距 */
/* 设置上外边距 */
margin-top: 40px; 
/* 设置左外边距 */
margin-left: 40px; 
					/* 设置上左外边距影响元素本身位置 */
/* 设置下外边距 */
margin-bottom: 40px; 
/* 设置右外边距 */
margin-right: 40px; 
					/* 设置上右外边距影响其他元素位置 */
/* margin复合属性 */
/* 一个值--上下左右 */
margin: 20px;
/* 两个值--上下,左右 */
margin: 20px 20px;
/* 三个值--上 左右 下*/
margin: 20px 20px 20px;
/* 四个值--上 右 下 左*/
margin: 20px 20px 20px 20px;

​ 设置左上外边距影响元素本身位置

​ 设置下右外边距影响其他元素位置

​ 子元素的左面和上面没有其他兄弟元素 , 那么子元素的左上边距就是子元素和父元素的距离

9.2 行内元素设置外边距

​ 行内元素只允许设置左右的外边距，设置上下的外边距不会生效（无意义）。

9.3 margin设置为负值和auto

margin设置为负值 : 左上外边距设置为负值 , 元素往左上移动 右下外边框设置为负值 其他元素往左上移动

margin设置为auto : 上下设置为auto无意义 , 左右设置为auto盒子水平居中

9.4 margin塌陷

什么情况发生margin塌陷

父元素的第一个子元素设置了上外边距, 这个边距会塌陷给父元素
父元素的最后一个子元素设置了下外边距, 这个边距会塌陷给父素

怎样解决margin塌陷

给父元素设置边框  颜色可以设置为transparent但是还是会有边框的宽度
父元素设置overflow属性,值为hidden

9.5 margin合并

相邻兄弟元素的第一个元素设置下外边距,
第二个元素设置上外边距,
这两个边距不会相加,而是取两值中较大的值作为那一个外边距

十、CSS属性的继承

10.1 可以继承的CSS属性

字体属性和文本属性可以继承

10.2 不可以继承的CSS属性

和盒子模型相关的属性都不可以继承

10.3 CSS继承的特殊情况

超链接a元素的color和text-decoration属性,系统默认设置了a元素的color和text-decoration,权重大于继承

​ 直接对元素的样式设置 > 默认的样式设置 > 继承下来的样式设置

十一、行内块元素的特性

11.1 继承的文本属性会对行内和行内块元素起作用

行内元素和行内块元素可以被当做文本进行处理，如果在父元素那里设置文本属性，会对行内元素和行内块元素起作用

如何让一个行内块元素或行内元素水平居中对齐？
	给它的父元素设置 text-align:center;

如何让一个行内块元素在父元素中垂直居中？
	给父元素设置行高（行高=高度）
	给行内块元素设置 vertical-align: middle

如何让一个块级元素在父元素中水平居中对齐？
	给元素自己设置左右外边距为 auto

11.2 行内块元素和行内元素左右之间的空白

行内元素或行内块元素之间会出现空白，空白其实是代码中的换行符。

解决方案：

方案一：写代码的时候不换行，也没有空格

方案二：设置父元素字体大小为 0，子元素再单独设置字体大小

11.3 行内元素和行内元素的底部幽灵空白

产生原因

行内元素和行内元素的对齐方式是基线对齐,和底线有一些距离
幽灵空白就是基线和底线的距离

解决方法

/*1.设置底线对齐*/
vertical-align: bottom;
/*2.设置父元素font-size为0 */
父元素--font-size:0;
/*3.把图片设置为块元素*/
 display: block;
/*4.设置父元素高度为行内元素和行内块元素高度---不建议使用*/

十二、浮动

12.1 元素浮动后的特点

元素浮动后文本脱离标准文档流,不再按照标准文档流排版
	元素浮动后特点:
		1.元素不再独占一行
		2.元素可以设置宽高
		3.元素可以设置内外边距
		4.元素的默认宽度由内容决定
		5.元素开启BFC

12.2 元素浮动后产生的影响

12.2.1 对后面兄弟元素的影响
元素浮动后,脱离标准流, 后面的兄弟元素会占据浮动元素之前的位置.
	解决办法:在浮动元素后面设置css属性 clear: both;
12.2.2 对父元素元素的影响
子元素浮动后,脱离标准流,父元素的高度没有元素撑起,形成高度坍塌.
	解决方法:
		1) 给父元素设置固定高度
		2) 给父元素设置BFC----overflow:hidden
		3) 在浮动元素后面添加一个高度为0的块元素设置CSS属性clear:both;
		4) 给父元素添加类 clearfix,设置CSS属性
											content: "";
											display: block;
											clear: both;
推荐使用第四种

	/*设置清除浮动类.给浮动元素的父元素添加清除浮动类*/
	/*有浮动就要清浮动*/
	.clearfix{
		content: "";
		display: block;
		clear: both;
	}

​ 注意 :

​ 布局的时候兄弟元素要浮动都浮动 , 要么不浮动.

​ 浮动元素都放在一块

​ 特别注意 :

​ 有浮动就得清浮动.

12.3 浮动相关属性

float	设置浮动	值： none（不浮动）、left、right

clear	清除浮动	值： both(使用多)、left、right

十三、定位

13.1 相对定位

①设置相对定位
position: relative;
②相对定位元素的特点
  • 相对定位以自己原来的位置为参考 , 使用 left right top bottom来设置定位元素位置
  • 相对定位不脱离标准文档流 , 不对其他元素产生任何影响 , 其他元素按照定位元素一开始的位置进行布局
  • 相对定位可以和浮动一起设置

13.2 绝对定位

①设置绝对定位
position: absolute;
②绝对定位元素的特点

  • 绝对定位是以第一个包含自己的定位包含块为参考, 如果没有定位包含块 , 那么就以根标签html为参照

    一般给要进行绝对定位子元素的父元素设置相对定位 , 相对定位的作用就是给绝对定位做参照

  • 绝对定位脱离标准文档流 , 对页面其他元素产生影响

  • 绝对定位不能浮动一起使用

  • 绝对定位的宽高是被内容撑起来的 , 但是可以正常设置宽高和内外边距

③绝对定位在页面布局中的应用
当元素的显示位置需要在其他元素的上面或者位置有重叠，建议显示在上面的元素用绝对定位
通常，子元素设置了绝对定位，父元素设置相对定位

13.3 固定定位

①设置固定定位
position: fixed;
②固定定位元素的特点
  • 固定定位是以视口为参考 , 固定定位的元素不因滚轮的滑动而改变位置.
  • 固定定位脱离标准文档流 , 对其他元素产生影响
  • 固定定位的默认宽高由内容决定 , 也可以正常设置宽高和内外边距.
  • 固定定位不能和浮动一起使用.
③固定定位在页面布局中的应用
如果元素不随滚动条的滚动而滚动，该元素应该用固定定位

13.4 定位相关的属性

① position 设置元素的定位形式
position: relative;/*相对定位*/
position: absolate;/*绝对定位*/
position: fixed;/*固定定位*/
② 设置定位元素的位置
left
right
top
bottom

注意 :

  1. 四个属性只有定位的元素才能使用，没有定位的元素设置了这4个属性也是无效！

  2. 如果定位的元素设置了宽度，left 和 right 不要一起用；

  3. 定位的元素如果设置了高度，top 和 bottom 不要一起用。

  4. 绝对定位和固定定位元素没有设置宽度，同时设置 left 和 right 都会生效，并会对元素的宽度产生影响；

  5. 绝对定位和固定定位元素没有设置高度，同时设置 top 和 bottom 都会生效，并会对元素的高度产生影响。

  6. 绝对定位和固定定位元素 , 如果 left 和 right 的值是百分比，参照包含块的宽度；
    绝对定位和固定定位元素 , 如果 top 和 bottom 的值是百分比，参照包含块的高度。

13.5 定位元素的层级

定位元素的层级相等,大于未定位元素 后设置的定位元素在页面中会覆盖在之前设置的定位元素上面
z-index会改变定位元素的覆盖层级.--只有定位元素可以设置,其他元素设置无效
	默认定位元素的z-index属性是 0 
	z-index属性可以设置为负值, 设置为负值,层级小于未定位元素,覆盖在未定位元素后面.
	z-index的属性值越大,层级越大

十四、精灵(雪碧)图

  • CSS sprites 翻译为精灵图或者雪碧图
  • 把很多小图放在一张大图上
  • 元素把该大图作为背景图片 , 通过background-position调整背景图在元素的位置
  • 精灵图优点 : 减少网络请求速度

精灵图在线编辑器 : https://alloyteam.github.io/gopng/

十五、让元素在父元素中水平垂直居中

15.1 行内块和行内元素水平垂直居中

父元素;
/* 行内块元素水平居中 */
text-align: center;
/* 行内块元素垂直居中 */
/* 行高==高度 垂直居中 */
line-height: 600px;
/* 默认是基线对齐要设置bottom; */
vertical-align: bottom;

15.2 块元素水平垂直居中

  • 方案一 :

    父元素:
position: relative;
子元素:
position: absolute;
left: 50%;
top: 50%;
/* 不能设置百分比,设置百分比是父元素的宽度的百分比 */
margin-left: -50px;
margin-top: -50px;

  • 方案二 :

    父元素:
position: relative;
子元素: 
/*子元素要有宽度*/
position: absolute;
left: 0;
right: 0;
top: 0;
bootom: 0;
margin: auto
Ponsine
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
parcel-plugin-css-to-string:将CSS文件作为字符串导入javascript
05-04
包裹插件css到字符串 将CSS文件作为字符串导入JavaScript。 styles.css . text { color : # 162D3D ; } index.js import styles from "./styles.css" ; console . log ( styles ) ; // ".text{color:#162D3D}" 安装 npm i --save-dev parcel-plugin-css-to-string # or yarn add -D parcel-plugin-css-to-string 如何使用 我建议对样式使用自定义扩展名，该扩展名将作为字符串导入。 对于全局样式或css-modules，这将有助于避免与.css文件的冲突。 默认资产类型css 。 您可以将自定义扩展列表添加到.parcelrc配置中。 例如： styles
gulp-inline-css:gulp-inline-css 使用内联 css 样式创建电子邮件模板
05-30
gulp-内联-css Gulp 与 Gulp 内联 CSS。 使用内联 css 样式创建电子邮件模板 安装 在运行之前，您必须安装并配置以下一次性依赖项： 使用下面的终端命令 $ npm install -g gulp 安装依赖项后，在终端中输入以下内容： $ git clone [email protected]:shoaibuddin/gulp-inline-css.git $ cd gulp-inline-css $ npm install 跑步 在终端中输入以下内容： $ gulp
28.html设置字体
越努力越幸运的博客
04-26 708
文章目录字体的属性冷知识1.怎么知道自己有没有某个字体呢？2.如果我硬要用一种不常见的字体，怎么办？ 字体的属性 由于比较简单，这里直接说明 字体相关的样式： 1.color：字体的颜色（前景色） 2.font-size:字体的大小 常用单位：px，em（相当于当前元素的一个font-size）和rem（相当于根元素的一个font-size） 3.font-family：字体族（字体的格式），默认格式是微软雅黑，也可以自己设置宋体，楷体等等。 可选值：（指定类别，具体格式由浏览器而定） ①.monospac
HTML字体样式
B18325387728的博客
10-13 2075
html中字体所涉及到的样式表现方式
css设置字体font-family表格接口_win10 下的VS code 前端程序员的一些参考设置,欢迎评论...
weixin_39813574的博客
11-25 324
中文字体默认是宋体,比较难看,可以进 文件(F) > 首选项 > 设置 中设置. (ctrl +,)Editor: Font Family控制字体系列 Consolas, 'Courier New', Monospace修改为Editor: Font Family控制字体系列 Consolas, 'Courier New', Dengxian这样就简单地变成了等线字体,(前者monos...
css常用样式
weixin_51450341的博客
07-24 2317
css样式即css层叠样式表，主要使用场景就是美化网页，用于设置html页面中的文本、图片内容以及版面布局和外观显示。
【CSS】CSS字体样式【CSS基础知识详解】
@花无缺
11-08 9895
文字是网页界面上最常见的元素，而文字的字体、大小和文字样式等都可以通过CSS来设置。在 CSS 中，有五个通用字型： 衬线字体（Serif） 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感 特点：文字笔画粗细不均匀，并且首尾有笔锋装饰 场景：报刊书籍中应用广泛 常见该系列字体：宋体、Times New Roman 无衬线字体（Sans-serif）字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。 特点：文字笔画粗细均匀
CSS font-family 各字体一览表
热门推荐
吃不胖的程序猿历程
08-04 2万+
windows常见内置中文字体 字体中文名 字体英文名宋体                      SimSun（浏览器默认）黑体                      SimHei微软雅黑               Microsoft Yahei微软正黑体            Microsoft JhengHei楷体              ...
html字体及文本样式设置
m0_65214572的博客
07-21 7369
html字体及文本样式设置
css字体系列大全
無
09-28 9164
css字体系列大全
select2 -- css样式
06-01
select2 css样式，其中确实select2.png 图片，记得修改
react-scoped-css：ReactCSS封装解决方案
02-04
开发人员的体验不好，这意味着您经常需要编写比实现简单样式所期望的更多的代码。 使用react-scoped-css，您可以编写已知的普通CSS，同时具有CSS封装的优势！ 它是如何工作的 将您CSS写入以.scoped.css结尾的文件中...
2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc
11-09
CSS-- Cascading Style Sheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果...
react-native-css：使用CSS样式化React-Native组件
02-19
react-native-css React-native-css将有效CSS转换为CSS的Facebook子集。 Babel插件 很棒的@ danilosterrapid7为React-native-css创建了一个babel插件： 版本2 随着版本2的到来，新的变化： 删除sass / scss支持，...
extract-css-chunks-webpack-plugin:从大块中提取CSS到多个样式表+ HMR
04-28
它具有mini-css-extract-plugin的所有优点，但具有2个闪闪发光的优点。 与现有的装载机相比，我们提供的是一个单一的解决方案，而不是需要依赖多个装载机来满足不同的功能：津贴HMR：它还对所有这些CSS文件/块中的...
js代码实现流星雨
weixin_34318272的博客
02-08 2285
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一起来看流星雨</title> <script> var context; var arr = new Array(); var star...
第三章：CSS入门。
qq_45728266的博客
12-12 482
1.CSS样式规则： 选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；} 引入CSS样式表：行内式：<标记名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标记名> 内嵌式： ...
CSS font-family常见中文字体对应的英文名称
guoqkmiss的博客
08-18 1645
CSS font-family常见中文字体对应的英文名称 var dataFont = { windows: [{ ch: '宋体', en: 'SimSun' }, { ch: '黑体', en: 'SimHei' }, { ch: '微软雅黑', en: 'Microsoft Yahei' }, { ch: '微软正黑体',
CSS基础2
dujiayuan的专栏
08-28 302
<br />一、伪类选择器<br />使用伪类选择器，我们可以以不同方式格式化超级链接<a>元素的四种不同状态：<br />1）a：link是用在未访问的链接的选择器<br />2）a：visited是用在已访问过的链接的选择器<br />3）a：hover是用在鼠标光标放在其上的链接的选择器<br />4）a：active是用在获得焦点（比如，被点击）的链接上的选择器<br />二、设置元素内容的字体<br />1.设置字体名称：font-family<br />2.设置字体的倾斜程度：font-styl
css-in-css
最新发布
02-05
2. CSS-in-JS：CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则，并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值