前端学习笔记 CSS基础布局 样式 书写规范

已于 2022-08-04 15:41:09 修改
阅读量1k 收藏 4
点赞数 3
分类专栏： 前端学习 文章标签： css css3
于 2020-06-12 00:07:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ym912305103/article/details/106700035
版权
本文详细介绍了CSS的基础知识，包括语法规范、代码风格、选择器类型和使用，以及字体、文本、背景属性。此外，还探讨了CSS的三大特性——层叠性、继承性和优先级。文章深入讲解了盒子模型，浮动、定位的概念和应用场景，以及一些常见的网页布局技巧，如清除浮动、定位模式和边偏移。最后，文章提到了CSS高级技巧，如精灵图、字体图标和CSS三角形的绘制，以及垂直对齐、溢出文字省略号显示等用户界面样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS-网页的美容师

  • CSS主要用来美化网页，布局页面
  • CSS是层叠样式表的简称有时也称为CSS样式表或级联样式表
  • CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面的布局及外观显示样式。
  • CSS可以美化HTML，让页面布局更简单
  • HTML只关注内容的语义。HTML不关注样式，只能做简单的样式。
  • CSS的最大价值：由HTML专注做结构呈现，样式交给CSS，即结构与样式分离。

CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

选择器 {
		属性：值;
		属性：值;
		}

一般写在<head>下的<style>标签中
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

CSS代码风格

  1. 样式格式书写

    1. 紧凑格式
    h1{color: red;font-size: 20px;}
    1. 展开格式（建议）
    h1 {
		color: red;
		font-size: 20px;
	}

  2. 样式大小写风格

    1. 小写（建议）
    h1 {
		color: red;
		font-size: 20px;
}
    1. 大写
    H1 {
		COLOR: RED;
		FONT-SIZE: 20PX;
}

  3. 样式空格风格

    1. 属性值前面，冒号后面，保留一个空格
    2. 选择器和大括号中间保留一个空格

CSS基础选择器

选择器的作用

选择器就是根据不同需求把不同的标签选出来；
示例：

<div> DIV </div>
<div> DIV </div>
<p> DUANLUO </p>
<ul>
	<li> UL-LI </li>
</ul>
<ol>
	<li> OL-LI </li>
</ol>
  1. div里面的文字改为红色
	div {
		color: red;
	}

  1. 第一个div的文字改为红色

  2. ul里li的文字改为红色

选择器的分类

选择器分为基础选择器和复合选择器两个大类

  1. 基础选择器
    基础选择器是由单个选择器组成的
    基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器
    1. 标签选择器：把某一类的标签全部选出来，但不能差异化设置
      选择器名称为标签名：
    	p {
		color: green;
	}
    1. 类选择器：差异化，单独选一个或某几个（常用）
    	.class_green {
		color: green;
	}
    结构需要用class属性来调用class类（类名不能与标签名重合，不要使用纯数字，中文）
    	<div class="class_green"> 绿色 </div>
    可以给一个标签指定多个类名，这些类名都可以选出这个标签（多个类名中间用空格分开）（公共样式更改方便）；
    	<div class="class_green class_squer"> 绿色 </div>
    1. id选择器
      HTML元素以id属性来设置id选择器，CSS中id选择器以#定义
    	#green {
		color: green;
	}

    	<div id="green"> 绿色 </div>
    id属性只能在每个HTML文档中出现一次
    id选择器和class选择器的区别：class可以多个使用，id只有一次，类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常搭配JavaScript；
    4. 通配符选择器
    使用*定义，表示选取页面中所有元素（标签）。
    	* {
		color: green;
	}
    特殊情况下才使用，例（清除所有元素标签的内外边距）
    	* {
		margin: 0;
		padding: 0;
	}
  2. 复合选择器
    • 复合选择器建立在基础选择器之上，对基本选择器进行组合形成的；
    • 复合选择器可以更准确，更高效的选择目标元素（标签）；
    • 负荷选择器是由两个或多个基础选择器通过不同方式组合而成的；
    • 常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等
    1. 后代选择器（重要）
      后代选择器又称为包含选择器，可以选择父元素里面子元素，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
    	基础选择器1 基础选择器2 ... {
		样式： 属性；
	}
	ol li ...{
		color: brown;
	}
    后代（可以是多重嵌套，可以将父标签里的儿子孙子等都选择出来）如：
    	ol li a {
		color: brown;
	}
    基础选择器可以是任意选择器
    2. 子元素选择器
    必须是亲儿子！只能选择子元素，孙子无关
    	div>a {
		color: brown;
	}
    1. 并集选择器
      可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明；任何选择器都可以作为并集选择器的一部分
    	.pig li,
	div,
	a {
		color: brown;
	}
    1. 伪类选择器
      用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素；
      前面用冒号表示：
    	:hover
    伪类选择器有很多，比如链接伪类，结构伪类，表单伪类等；
    1. 链接伪类选择器
    css a:link：/*选择所有未被访问的链接*/ a:visited：/*选择所有已被访问的链接*/ a:hover：/*选择鼠标指针位于其上的链接*/ a:active：/*选择活动链接（鼠标按下未弹起的链接）*/
    + 为了确保生效，要按照link,visited,hover,active的顺序定义链接伪类选择器；love hate
    + 因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式
    实际开发中链接伪类的写法：
    css a { color: red; } a:hover { color: green; }
    2. :focus伪类选择器
    用于选取获得焦点的表单元素
    一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说；
    css input:focus { background-color: yellow; }

CSS字体属性

字体属性用于定义字体系列，大小，粗细和文字样式（斜体粗体之类）

  1. 字体系列（可以多个字体,字体之间用英文隔开，字体中有空格的加引号，尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示）
	p {
		font-family: "Microsoft Yahei",Arial;
	}

当有多个字体时，浏览器先查看逐个查看电脑上有没有该字体，如果有就以这个字体显示，都找不到就默认。
一般在body标签里定义字体
2. 字体大小

	p {
		font-size: 16px;
	}
  1. 字体粗细
	p {
		font-weight: nomal(400)/blod(700)/bloder/lighter/number;
		font-weight: 700;（加粗，实际开发中更常用数字）
	}
  1. 文字样式
	p {
		font-style: nomal/italic;
	}
  1. 字体复合属性（节约代码）
	p {
		font: font-style font_weight font_size/line-height font-family;
	}

不需要设置的属性可以省略（默认值），但必须保留font-size和font-family属性，否则font属性不起作用；

文本属性

定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等

  1. 文本颜色
    color：预定颜色值、十六进制（#FF0000）、RGB代码（rgb(225,0,0)/rgb(100%,0%,0%)）
	p {
		color: green;
	}
  1. 文本对齐
    本质是让盒子里的文字对齐
	p {
		text-align: left/center/right;
	}
  1. 文本装饰
	p {
		text-decoration: none(最常用)/underline/overline/line-though;
	}
  1. 文本缩进
    通常指首行缩进
    em是相对单位，当前元素1个文字的大小
	p {
		text-indent: 10px/2em;
	}
  1. 行间距
    行间距=上间距+文字高度+下间距
	p {
		line-height: 26px;
	}

CSS的引入方式

按照CSS样式书写的位置不用，CSS样式表分为三大类

  1. 行内样式表（行内式）
    • 适合修改简单样式；
    • 只有一两个；
    • 内部直接style属性；
    • <div style="color: red; font-size: 12px">你好</div>；
    • 不推荐大量使用；
  2. 内部样式表（嵌入式）
    • CSS写到<style>标签中；
    • <style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中；
    • 此种样式可以方便控制当前整个页面中的元素样式设置；
    • 代码结构清晰，但是并没有完全分离；
  3. 外部样式表（链接式）
    • 实际开发都是外部样式表，适合于样式比较多的情况，可信是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用；
    • 引入外部样式表分为两步：
      1. 新建一个后缀名为.css的样式文件，把所有CSS代码放在里面；
      2. 在HTML页面中，使用<link>标签引入这个文件；
        <link rel="stylesheet" href="cssURL">

###Emmet语法
Emmet语法的前身是Zencoding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法；

  1. 快速生成HTML结构
    1. 生成标签：标签名按tab
    2. 生成多个相同标签：加上*，如div*3
    3. 有父子级关系的标签：用>，如ul>li
    4. 有兄弟关系的标签：用+，如div+p
    5. 生成的div类名有顺序，可以用自增符号 ，如 ‘ p . d e m o ，如`p.demo ，如‘p.demo*5`
    6. 生成的标签内部写内容可以用{},如div{你好}*5
  2. 快速生成CSS样式语法
    1. w200 快速生成width: 200px;
    2. lh26 快速生成line-height: 26px;
  3. 快速格式化代码

CSS的元素显示模式

了解元素的显示模式可以更好的布局页面

  1. 元素显示模式
    网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好地布局页面；
    元素显示模式就是元素以什么方式进行显示，比如<div>单独占一行，比如一行可以放多个<span>
    HTML元素一般分为块元素和行内元素
  2. 块元素
    常见的块元素有<h1>-<h6>，<p>，<div>，<ul>，<ol>，<il>等，其中<div>是最典型的块元素；
    块元素的特点：
    • 独占一行
    • 高度，宽度，外边距，内边距都可以控制
    • 宽度默认是容器（父级宽度的100%）
    • 是一个容器及盒子，里面可以放行内或者块级元素
    • 文字类元素内不能用块级元素，如<p>，<h1>-<h6>
  3. 行内元素
    常见的行内元素有<a>，<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等，其中<span>是最典型的块内元素，也叫内联元素；
    行内元素的特点：
    • 一行可以放多个行内元素
    • 高宽直接设置会无效
    • 默认宽度是它本身的宽度
    • 行内元素只能容纳文本以及其他行内元素
    • 链接里面不能放链接
    • 特殊情况下<a>内可以放块级元素，但是给<a>转化一下块级模式最安全
  4. 行内块元素
    在行内元素中有几个特殊的标签<img />，<input />，<td>，他们同时具有块元素和行内元素的特点；
    • 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
    • 默认宽度是他本身内容的宽度（行内元素特点）
    • 高度，行高，外边距，内边距可以控制（块级元素特点）
  5. 元素显示模式转换
    特殊情况下，我们需要元素模式的转换：一个模式的元素需要另一种模式的特性（比如想要增加链接<a>的触发范围）
    • 转换块级元素：display: block;（最多）
    • 转换行内元素：display: inline;
    • 转换行内块元素：display: inline-block;
  6. 小技巧
    文本垂直居中：行高等于容器高度

CSS的背景

给页面元素添加背景样式；
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等；

  1. 背景颜色
    background-color: transparent|color;
  2. 背景图片
    background-image: none|url(URL地址);
    不用image，非常容易控制位置，实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片；
  3. 背景平铺
    background-repeat: repeat|no-repeat|repeat-x|repeat-y;
  4. 背景位置
    background-position: x y;
    1. 参数是方位名词：两个值前后顺序无关，left top=top left
    2. 只指定一个方位名词，则第二个默认居中
    3. 参数是精确单位，第一个是x坐标，第二个是y坐标
    4. 第一个为精确单位，剩下的y居中
    5. 混合使用时第一个x，第二个y
  5. 背景附着
    background-attachment: scroll|fixed;
    后期可以制作视差滚动的效果
  6. 背景复合写法
    background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
    参数无顺序
  7. 背景色半透明
    background: rgba(0,0,0,0.3);
    只是背景色半透明，盒子里的内容不受影响

CSS的三大特性

CSS有三个非常重要的特性：层叠性，继承性，优先级；

层叠性

相同选择器给设置相同的样式，此时一个样式会覆盖另一个冲突的样式，层叠性主要解决样式冲突问题

  1. 层叠性原则：
    样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
    样式不冲突不会重叠

###继承性
子标签会继承父标签的某些样式，比如文本颜色和字号
子元素可以继承父元素的样式（text-，font-，line-，以及color）

  1. 行高的继承
    行高可以跟单位，也可以不跟,不跟时继承行高的倍数
    font: 12px/1.5

###优先级
选择器相同时层叠性
选择器不同时看选择器权重（越往下越大）
+ 继承或者*：0.0.0.0
+ 标签选择器：0.0.0.1
+ 类选择器，伪类选择器：0.0.1.0
+ ID选择器：0.1.0.0
+ 行内样式style=""：1.0.0.0
+ !important：无穷大

	div {
		color: red!important;
	}
  1. 权重由4个数字组成，永远不进位
  2. 继承权重为0
  3. 浏览器会给<a>一个默认样式，比继承权重大；
  4. 权重比较从第一位开始比
  5. 权重叠加：复合选择器叠加优先级
    • ul li：0.0.0.1+0.0.0.1=0.0.0.2
    • .nav li：0.0.1.0+0.0.0.1=0.0.1.1

盒子模型

页面布局有三大核心：盒子模型，浮动和定位。

###网页布局的本质
网页布局的核心本质就是利用CSS摆放盒子
网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子box；
  2. 利用CSS设置好盒子样式，然后摆放到相应位置；
  3. 往盒子里面装内容；

盒子模型（Box Model）的组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型的本质上是一个盒子，封装周围的HTML元素，他包括：边框，外边框，内边距，外边距和实际内容；

  1. border：边框
    border可以设置元素的边框。边框由三部分组成：边框宽度，边框样式，边框颜色；
    border: border-width|border-style|border-color
    边框简写：
    border: 1px soid red;（没有顺序）
    表格的细线边框时，要将相邻边框合并：
    border-collapse: collapse;
    边框会影响盒子的实际大小；
    外边框会将盒子增大；
  2. content：内容
    默认内容与盒子紧贴；
  3. padding：内边距
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;	
padding-bottom: 10px;

padding复合书写：

padding: 上下左右;
padding: 上下 左右;
padding: 上 左右 下;
padding: 上 右 下 左;

内边距也会影响盒子实际大小；
盒子已经有宽高时，加上内边距会将盒子变大；
盒子没有指定大小时，padding不会撑开盒子大小。实际开发时用padding可以用来巧妙的改变盒子大小；
4. margin：外边距

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

简写与padding一致；

1. 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并；
	1. 相邻块元素垂直外边距的合并（取较大值，尽量只给一个盒子加外边距）；
	2. 嵌套块元素垂直外边距的塌陷（父元素会选择较大外边距塌陷，给父元素添加边框会解决，或者直接定义内边距，或为父元素添加`overflow: hidden;`）；
2.	行内元素和行内块元素水平居中给其父元素添加`text-align :center`即可；
3. 外边距可以让块盒子水平居中，但是必须满足两个条件：
	1. 盒子必须指定宽度
	2. 左右边距设置成auto
```css
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;（多）
```
  1. 清除内外边距
    开发中，不同浏览器，标签有不同的默认内外边距，为了更好的布局，所以要清除所有内外边距；
	* {
		margin: 0;
		padding: 0;
	}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了；
6. 圆角边框
border-radius: length（圆的半径）;
参数可以是精确值可以是百分比
参数：1-4个

border-radius: 四角;
border-radius: 左上右下 右上左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上 右上 右下 左下;

分开写：

border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:

  1. 盒子阴影
    盒子阴影不占空间
    box-shadow: h-shadow v-shadow blur spread color inset;

    • h-shadow：必须，水平阴影位置，可以负值；
    • v-shadow：必须，竖直阴影位置，可以负值；
    • blur：可选，模糊距离；
    • spread：可选，阴影尺寸；
    • color：可选，阴影颜色；
    • inset：可选，将外部阴影（outset）改为内部阴影；

  2. 文字阴影
    text-shadow: h-shadow v-shadow blur color;

###浮动

  1. 传统网页布局的三种方式
    1. 普通流（标准流/文档流）
      块级元素独占一行，从上到下顺序排列；行内元素按照顺序，从左到右顺序排列，碰到父元素边缘自动换行；
    2. 浮动
    3. 定位
    4. 这三种方式都是用来摆放盒子的，盒子摆放到合适的位置，布局就完成了，实际开发中，一个页面基本都包含了这三种布局方式（移动端有新的）；
  2. 为什么需要浮动
    1. 将几个块级元素排成一行时，转换成行内块会有缝隙，很难控制；
    2. 两个盒子的左右对齐难以实现；
    3. 浮动可以改变元素的默认排列方式；（最典型的就是将块级元素在一行显示）
    4. ** 网页布局第一准则：多个块级元素纵向排列标准流，多个块级元素横向排列找浮动。**
  3. 什么是浮动
    float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘；
    选择器 {float: none||left||right; }
    元素不浮动 || 元素向左浮动 || 元素向右浮动
  4. 浮动特性
    1. 浮动元素会脱离标准流（脱标），脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原先的位置；
    2. 浮动的元素会一行内显示并且元素顶部对齐，一行装不下时会自动换行；
    3. 浮动的元素会具有行内块元素的特性，如果行内元素有了浮动，不需要转换行内块/块级元素就可以直接给宽度和高度；
    4. 块级盒子没有设置宽度时，默认宽度和父级一样，但是添加浮动后，大小根据内容决定；
    5. 浮动的盒子中间没有缝隙，是紧挨着的
    6. 行内元素同理
  5. 浮动元素经常和标准流父级搭配
    为了约束浮动元素位置，网页布局一般先用标准流的父级排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则；
    网页布局第二准则：先设置盒子的大小，之后设置盒子的位置。

###常见的网页布局

注意点：

  • 浮动和标准流的父级盒子搭配；
  • 一个元素浮动了，理论上其他的兄弟元素也要浮动，浮动的盒子指挥影响浮动盒子后面的饿标准流，不会影响前面的标准流；
  • 父盒子不一定有高度，有些需要让子盒子撑开父盒子，有多少浮动元素，父盒子就有多高；

清除浮动

  1. 为什么要清除浮动
    很多情况下，父盒子不便给出一定的高度，理想状态下，父盒子不一定要有高度，有些需要让子盒子撑开父盒子，有多少浮动元素，父盒子就有多高。但是子盒子浮动不占用位置，父盒子高度会变成0，会影响到下面的标准流盒子；所以需要清除浮动；
  2. 清除浮动的本质
    清除浮动产生造成的影响，如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响到下面的标准流了；
    选择器 { clear: left||right||both; }
    开发过程中几乎只用both
    清除浮动的策略是：闭合浮动；
  3. 清除浮动的方法
    1. 额外标签法（隔墙法），W3C推荐；
      在浮动元素的末尾添加一个空的标签。比如<div style="clear: both"><div>，或者其他标签（如<br />等）。通俗易懂，书写方便但是会添加许多无意义的标签，结构化较差，不常用。新添加的空标签必须是块级元素；
    2. 父级添加overflow属性；
      父级添加overflow: hidden;，之前防止外边距合并；代码简洁，但是无法显示溢出的部分；
    3. 父级添加:after伪元素；
      :after方式是额外标签法的升级版，也是给父元素添加，相当于给父盒子用CSS添加了一个块级元素：
    .clearfix:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
.clearfix { /*IE6、7专有*/
		*zoom: 1;
	}
    不会增加新的额外标签，结构简单，但是需要照顾低版本的浏览器兼容问题；百度，淘宝，网易都在用；
    4. 父级添加双伪元素；
    .clearfix:before,
.clearfix:after {
		content: "";
		display: table;
	}
.clearfix:after {
		clear: both;
	}
.clearfix {
		*zoom: 1;
	}
    代码更简洁，还是要照顾低版本浏览器；小米，腾讯在用；

定位

  1. 为什么需要定位

    1. 想要某元素可以自由的在一个盒子内移动位置，并且压住其他盒子；
    2. 固定到屏幕某个位置的盒子；
    3. 定位可以做到；

  2. 定位组成
    定位：将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子；
    定位 = 定位模式 + 边偏移
    定位模式：用于指定一个元素在文档的定位方式；
    边偏移：决定该元素的最终位置；

    1. 定位模式
      定位模式决定元素的定位方式，他通过CSS的position属性来设置，常用四个；
    	static: 静态定位
	relative: 相对定位
	absolute: 绝对定位
	fixed: 固定定位

    1. 边偏移
      边偏移将定位的盒子移动到最终位置，参数top，bottom，left，right；
      定义元素相对于父元素的距离；

    2. 静态定位（默认无定位，不常用）
      选择器 { position: static; }
      静态定位按照标准流特性摆放位置，没有边偏移；

    3. 相对定位
      选择器 { position: relative; }
      相对定位是元素在移动位置的时候，是相对于它原来的位置来说的；

      1. 它是相对于自己原来的位置移动；
      2. 虽然盒子移动了，但是它在标准流的位置会保留，并且不影响其他盒子（压住，不脱标）；
      3. 相对定位最典型的应用是给绝对定位当爹；

    4. 绝对定位
      选择器 { position: absolute; }
      绝对定位是在元素移动位置的时候，是相对于它祖先元素来说的；

      1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）；
      2. 如果祖先元素有定位（相对，绝对，固定），则以最近一级有定位的祖先元素为参考点移动位置；
      3. 绝对定位不占有原先的位置（脱标）；

    5. 子绝父相
      子绝父相：子级使用绝对定位，父级需要相对定位；

      1. 子级用绝对定位来做，不会占有位置，可以放在父盒子的任何一个地方，不会影响其他的兄弟盒子（子绝）；
      2. 父盒子需要加定位限制子盒子在父盒子内显示，但是加绝对定位会影响父盒子之后的盒子，相对定位不脱标，最适合做绝对定位的父级（父相）；
      3. 子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到；

    6. 固定定位
      选择器 { position: fixed; }
      固定定位是元素固定于浏览器可视区的位置，可以在浏览器页面滚动时元素的位置不改变；

      1. 以浏览器的可视窗口为参照移动元素，跟父元素没有任何关系，不随滚动条滚动；
      2. 固定定位不占有原先的位置（脱标）。
      3. 可以看做特殊的绝对定位；
      4. 固定定位小技巧：固定在版心右侧位置（小算法）；
      	left: 50%;
	margin-left: 版心宽度/2;

    7. 粘性定位
      选择器 { position: sticky; top: 10px;}
      粘性定位可以被认为是相对定位和固定定位的混合；

      1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）；
      2. 粘性定位占有原先的位置（不脱标，相对定位特点）；
      3. 必须添加top，bottom，left，right之中的一个才有效果；
      4. 跟页面滚动搭配使用，兼容性较差，IE不支持（一般这种效果使用JavaScript制作）；

  3. 定位叠放次序z-index

    • 在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index（z：z轴）来控制盒子；
      选择器 { z-index: 1;}
    • 数值可以是正整数，负整数或0，默认auto，数值越大，盒子越靠上；
    • 数值相同时，书写顺序，后来居上；
    • 数字后面不能加单位；
    • 只有定位的盒子有z-index属性；

  4. 绝对定位的盒子居中
    不能用标准流的margin: 0 auto;;
    水平居中：left: 50%; margin-left: -50;（盒子宽度的一半）；
    竖直居中：top: 50%; margin-top: -50;（盒子高度的一半）；

  5. 定位的特殊特性

    • 绝对定位和固定定位和浮动类似（行内元素可以直接指定宽度，高度）；
    • 块级元素不设置宽高，默认与内容大小相同；
    • 浮动元素，绝对定位（固定定位）元素不会触发外边距合并的问题；

  6. 拓展
    绝对定位（固定定位）会完全压住盒子（浮动元素不同，它只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字，图片）；
    浮动之所以不会压住文字，因为浮动产生的目的就是为了做文字环绕效果的，文字会围绕浮动元素；
    如果过一个定位盒子既有left属性又有right属性，先左后右，同理，先上后下；
    ###PS
    前端经常使用PhotoShop来进行编辑素材，.psd格式图层

CSS属性书写顺序

例子：

	.jde{
		display: block;
		position: relative;
		float: left;
		width: 100px;
		height: 100px;
		margin: 0 10px;
		padding: 20px 0;
		font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;"
		color: #333;
		background: rgba(0,0,0,.3);
		border-radius: 10px;
	}

顺序：

  1. 布局定位属性
    disply(模式建议第一个写)/position/float/clear/visibility/overflow
  2. 自身属性
    width/height/margin/padding/border/background
  3. 文本属性
    color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. 其他属性（CSS3新增）
    content/cursor/border-radius/box-shadow/text-shadow/background-gradient...

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

  1. 必须确定页面的版心（可视区），测量得知；
  2. 分析页面中的行模块，以及每个行模块中的列模块：页面布局第一准则；
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则；
  4. 制作HTML结构，遵循先有结构，后有样式的原则，结构永远最重要；
  5. 先理清楚布局结构，再写代码；

###元素的显示与隐藏
网站广告这种点击关闭会将广告隐藏起来，下次刷新页面时还会出来；

  1. display显示隐藏
    display属性用于设置一个元素如何显示；
    display: none;：隐藏对象，隐藏后元素位置不保留（用处更多）；
    display: block;：除了转换为块级元素以外，还有显示元素的意思；
    这两对属性应用极为广泛，搭配JS可以做出很多网页特效；

  2. visibility显示隐藏
    visibility: inherit;：继承上一个父对象的可见性；
    visibility: visible;：对象可视；
    visibility: hidden;：对象隐藏，隐藏后继续占有原来的位置；

  3. overflow溢出显示隐藏
    指定如果内容溢出一个元素的框时（超过其指定高度和宽度），会发生什么；
    overflow: visible;：不切内容及不添加滚动条，直接显示；
    overflow: hidden;：溢出部分不显示；
    overflow: auto;：溢出时添加滚动条；
    overflow: scroll;：总是显示滚动条；
    溢出的内容会影响布局；
    但是，有定位的盒子，慎用overflow: hidden;因为他会隐藏多余的部分（故意超出盒子的部分）；

####土豆网鼠标经过显示遮罩
核心原理：原来有一个黑色半透明遮罩看不见，鼠标经过大盒子就显示出来；因为遮罩的盒子不占有位置，所以需要绝对定位和display来使用；
background: rgba(0,0,0,.4) url(xxx.jpg) no-repeat center;

CSS高级技巧

精灵图

  1. 为什么需要精灵图
    一个网页中往往会应用很多小的背景图像作为修饰，党网页中图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度；
    因此，为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites、CSS 雪碧）；
    核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了；

  2. 精灵图的使用
    使用精灵核心：

    1. 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。；
    2. 这个大图片也称为精灵图（Sprites图）；
    3. 移动背景图片位置，此时可以使用background-position；
    4. 移动的距离就是这个目标图片的x和y坐标；
    5. 精准测量图片，一般精灵图都是负值；

  3. 字体图标
    主要用于显示网页中通用，常用的一些小图标。
    字体图标（iconfont）**展示的是图标，本质是字体；**有着轻量，灵活，兼容的优点；

    1. 精灵图虽然优点很多，但是缺点也很明显：

      1. 图片文件还是比较大的；
      2. 图片的缩放会导致失真；
      3. 图片制作完成以后想要更换会很麻烦；

    2. 使用字体图标

      1. 字体图标的下载
        Icomoon字库：http://icomoon.io；
        阿里iconfont字库：http://www.iconfont.cn：包含淘宝图标库和阿里妈妈图标库，可以使用AI制作图标上传生成，免费；
      2. 字体图标的引入
        1. 将fonts文件夹放在页面根目录下；
          不同浏览器支持字体格式不同，字体图标之所以兼容，就是因为白喊了主流浏览器支持的字体文件（.ttf/.woff/.eot/.svg）；
        2. 在CSS样式中全局声明字体：简单理解为把这些字体文件通过CSS引入到页面中。一定要注意字体文件路径的问题。
        	@font-face
		font-family: '[icomoon]/[iconfont]';
		src: url(' ');
		src: url(' ') format(' '),
			url(' ') format(' '),
			url(' ') format(' '),
			url(' ') format(' ');
		font-weight: normal;
		font-style: normal;
	}
        下载后的文件中会有style.css文件复制；
        使用时打开文件中的html文件复制相应字符；
        在使用特殊符号的容器中声明字体；
      3. 字体图标的追加
        把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，替换原来文件即可；

CSS三角

网页中经常出现三角形，不用图标，可以直接用CSS画出来；
当盒子没有大小（w0，h0），只定边框，每一个边框都是三角形，大小由边框粗细决定，剩余为透明；

	div {
		width: 0;
		height: 0;
		line-height: 0;/*为了兼容浏览器
		font-size: 0;  */
		border: 50px solid transparent;
		boder-bottom-color: pink;
	}

CSS用户界面样式

  1. 什么是界面样式
    更改一些用户操作样式，以便提高更好的用户体验；

    1. 更改鼠标样式
      li {cursor: defalt（默认）/pointer（小手）/move（移动）/text（光标）/not-allowed（禁止）;}

    2. 表单轮廓 outline
      outline: none;

    3. 防止表单域拖拽
      resize: none;

vertical-align属性应用

CSS中经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
用于设置元素垂直对齐的方式，但是它只针对于行内元素或者行内块元素有效；
vertical-align: baseline（基线，英语的线，默认）/top（顶线）/middle（中线）/bottom（底线）;
解决图片底部的空白空隙问题（默认基线对齐的bug）：1.更改对齐方式，2.将图片转为块级元素；

溢出文字省略号显示

  1. 单行文字溢出
    必须满足三个条件：
/*1. 强制一行内显示文本（默认normal会自动换行）*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号代替超出部分*/
text-overflow: ellipsis;
  1. 多行文字溢出
    多行文本溢出显示省略号有较大的兼容性问题，适合web浏览器或者移动端（移动端大部分是webkit内核）；
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

此做法虽然指定行数会显示省略号，但是下一行依然显示文字，只能调整盒子高度；
ie不兼容；
一般后台人员做这个，后台人员可以控制显示多少字；

常见布局技巧

  1. margin负值运用
    浮动元素像素边框叠加时margin负值边框宽度；
    但是伪元素选择器鼠标经过时设置边框下一个盒子会压住上一个盒子（解决方法：hover选择器样式添加相对定位（定位压住所有盒子但是保留位置不脱标），如果已经有了定位，则加上z-index属性压住所有盒子）；

  2. 文字围绕浮动元素技巧
    浮动元素不会压住文字

  3. 行内块巧妙运用
    页码盒子

  4. 梯形盒子（CSS三角强化）
    border-bottom
    border-left
    去掉；
    调整盒子大小；
    之后绝对定位覆盖；

  5. CSS初始化
    不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，所以需要初始化；
    每个网页都必须先进性CSS初始化

	* {/*去除内外边距*/
		margin: 0;
		padding: 0;
	}

	em,
	i {/*字体不倾斜*/
		font-size: none;
	}

	li {/*去除小圆点*/
		list-style: none;
	}

	img {/*去除低版本浏览器下链接图片的边框*/
		border: 0;
		/*取消图片底部空白空隙*/
		vertical-align: middle
	}

	button {/*鼠标经过时，鼠标样式变化*/
		cursor: pointer;
	}

	a {
		color: #666;
		text-decoration: none;
	}
	
	a:hover {
		color: #c81623;
	}

	botton,
	input {
		font-family:          ;
	}

	body {
		/*抗锯齿*/
		-webkit-font-smoothing: antialiased;
		background-color: #fff;
		font: 12px/1.5     ；
		color: #666;
	}

	.hide,
	.none {
		display: none;
	}

	/*清除浮动*/
	.clearfix:after {
		visibility:hidden;
		clear: both;
		display: block;
		content: ".";
		height: 0;
	}
	
	.clearfix {
		*zoom: 1;
	}
前端开发样式表规范
qq_36024963的博客
09-03 397
CSS书写顺序 1、DOM 节点属性（display及其衍生属性：display:flex; justify-content: center等） 2、位置关系（position、left、top等） 3、content外属性（margin、border、padding） 4、content属性（max-width、width、height） 5、行内元素属性（text-align、...
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 1522
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
Css规范整理：1、布局大纲
02-10 165
布局大纲 CSS 2.1中，一个盒可能会根据三种定位方案来布局： 常规流 CSS 2.1中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位 浮动在浮动模型中，盒先根据常规流来放置，然后从常规流中取出来并尽可能远地向左或向右移动。...
【前端】3.总结一下前端css样式规范
小冷coding的博客
10-24 1538
学习前端必不可少的css样式，了解下样式的规范
css书写规范
柠檬麻麻
07-25 443
列表内容 编码设置采用 UTF-8 编码，在 CSS 代码头部使用：@charset "utf-8";注意，必须要定义在 CSS 文件所有字符的前面（包括编码注释），@charset 才会生效。例如，下面的例子都会使得 @charset 失效：/* 字符编码 */ @charset "utf-8"; html, body { height: 100%; }@charset "utf-8"; 列表
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1812
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
前端开发基础：HTML+CSS
04-06
- **定义**：CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的布局和外观。 - **作用**：通过定义颜色、字体、间距等属性美化网页。 - **引入方式**：内联样式、内部样式表、外部样式表。 #### CSS选择...
我的前端笔记——css基础部分
weixin_42053787的博客
06-12 557
CSS基础阶段 基础选择器总结 字体属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g5PcCBvf-1623419821644)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20210327161104542.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6uDmMo4l-1623419821645)(C:\Users\pc\AppData\Roam
免费下载前端HTML，CSS总结(b站黑马程序员540集)
最新发布
06-19
“b站前端学习”这个压缩包可能包含了丰富的学习资料，如视频教程、笔记、练习项目等。在学习过程中，理论与实践相结合是关键。观看视频教程可以帮助理解概念，笔记则有助于巩固知识点，实际动手编写代码则能加深...
CSS样式，2024年最新web前端开发规范
m0_60452141的博客
04-10 552
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-NrpqRFnu-1712715710980)]
css页面布局基本规则
旧忆时光的博客
05-06 276
盒子模型 box-sizing:设置浏览器盒子模型计算规则，默认为content-box. content-box:在高度和宽带内容之上，绘制内边距和边框。 border-box:在高度和宽度内容内，绘制内边距和边框。 内联元素和块级元素 内联元素：内联元素之间存在于一行，且高度宽度无效，如a标签。 块级元素，不可与其他元素在一行，且设置高度宽度有效，如div标签。 display:block,// 可将元素设置为块级元素 display:inline,//可将元素设置为内联元素。 disP.
教你如何写出更好的CSS，多年前端开发工作经验总结
前端工程师年薪30万，就靠这套教程！持续更新最新知识
06-21 582
让我们开门见山：编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行，但是 CSS 还是算了吧。 在我创建应用的时候，从来都无法从 CSS 中享受到乐趣。但是你也躲不过去，是不是？我是说，我们全神贯注于用户体验，但是如今设计也是不容忽视的部分。 项目刚开始的时候，一切都很美好。你有一些 CSS 选择器，诸如 .title、input、#app 等等，非常简单。但是随着应用逐渐变大，CSS 也越来越糟。你对 CSS 选择器感到困惑。你会发现自己写了一些 div#ap
css样式布局
qq_46239275的博客
03-25 1271
css布局
HTML与CSS教学-第十一章 使用CSS样式完成网页布局
flyuniverse_shell的专栏
03-13 2030
第十一章 使用CSS样式完成网页布局 本章要点 网页居中的实现方式 基于FLOAT的网页布局的实现方式 图文混排复杂布局的的实现方式 目录： 11.1  CSS网页布局介绍 11.2  网页居中 11.3  基于FLOAT的网页布局 11.4  复杂布局 11.1  CSS网页布局介绍 1. CSS网页布局的意义 用CSS进行网页布局使网站的信息更丰富、网页表现更美
前端实用的20个css技巧
坚信万物皆可切的切图仔
01-04 5609
你在使用flex布局的时候有遇到过这种情况吗？每行固定元素个数每行元素都是的效果（两端对齐，项目之间的间隔相等，即剩余空间等分成间隙）最后一行元素需要靠左对齐方法1: 使用js补齐元素，例如，每行展示3个元素，现在一共有5个元素，那么我们就可以在最后补一个同宽度的透明元素。方法2:设置为实现两端对齐效果，最后一行再特殊处理：思路为选中最后一个元素，设置其右边距，挤到只能容纳最后一行元素的宽度。jcode方法3:设置为flex-start,先将全部元素左对齐，然后计算出每个元素的间距，通过gap。
css之基础及布局属性
weixin_30256505的博客
06-18 93
css之基础及布局属性 1.CSS三种关联方式 行间样式　　如<p style=”color:#f00” >divcss8</p>内联表方式　　 　　(1):先在<head></head>之间加上<style>*********样式***********</style> 　　(2):html里面采用选择器 调用所有的样...
CSS网页布局
淘小欣的博客
03-09 596
文章目录CSS网页布局一、布局相关的标签二、网页布局方式1.什么是网页布局？2.网页布局/排版的三种方式三、标准流四、浮动流1.什么是浮动？2.浮动的作用3.浮动的三种设置4.什么是脱离文档流？5.那什么又是半脱离文档流？6.overflow溢出属性介绍7.浮动元素贴靠问题8.浮动元素字围现象9.浮动流排版练习10.浮动元素高度问题(又称父级塌陷)11.清除浮动清除浮动方式一：清除浮动方式二：clear属性介绍需要注意的问题清除发动的方式三隔离法代码示例清除浮动的方式四清除浮动的方式五：13.总结五、定位流
css公共样式
qq_42740298的博客
09-01 411
css公共全局样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值