css - 基础

已于 2022-09-11 00:59:37 修改
阅读量537 收藏
点赞数
分类专栏： css 文章标签： css html 前端
于 2022-09-02 09:41:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43587933/article/details/126656065
版权

一、CSS初识

1. 名称解释

CSS(Cascading Style Sheets)：CSS样式表或层叠样式表(级联样式表)

2. HTML的局限性

  • HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。
  • 操作html属性不方便
  • HTML里面添加样式带来的是无尽的臃肿和繁琐

3. 注释

/* 这是注释 */

二、引入CSS样式表

1. 行内式

通过标签的style属性来设置元素的样式

  • style其实就是标签的属性
  • 多组属性值直接用 ; 隔开
  • 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
  • 缺点: 没有实现样式和结构相分离。
<p style="color: red; font-size: 12px;">文字</p>

2. 内嵌式

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

  • style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
  • type=“text/css” 在html5中可以省略。
  • 只能控制当前的页面
  • 缺点: 没有彻底分离结构与样式
<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

3. 外链式

是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

  • rel : 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
  • href : 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
<link rel="stylesheet" href="index.css">

三、选择器

1. 基础选择器

1.1. 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

  • 作用：可以把某一类标签全部选择出来。
  • 优点：快速为网页中同类型的标签统一样式
  • 缺点：不能设计差异化样式。
p {font-size: 16px; color: #333;}
1.2. 类选择器
  • 类选择器使用"."(英文点号)进行标识，后面紧跟类名。
  • 语法：类名选择器
<style>
    .box  {   
        font-size: 16px; 
        color: #333; 
    }
</style>

<p class="box"></p>

  • 优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

  • 注意：类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)

    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要纯数字、中文等命名， 尽量使用英文字母来表示。
    • 多类名选择器：各个类名中间用空格隔开。
1.3. id选择器

id选择器使用#进行标识，后面紧跟id名，元素的id值是唯一的，只能对应于文档中某一个具体的元素

<style>
    #app  {   
        font-size: 16px; 
        color: #333; 
    }
</style>

<div id="app"></div>
1.4. 通配符选择器

通配符选择器用*号表示，* 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

* {
  margin: 0;
  padding: 0;
}

2. 复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

2.1. 后代选择器
.box p {color: red; font-size: 16px;}
2.2. 子元素选择器
  • 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
  • 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
  • 这里的子,指的是亲儿子。不包含孙子 重孙子之类。
.box>p {color: red; font-size: 16px;}

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

2.3. 同级选择器
2.3.1. ~(波浪号)

p ~ div 是指 p 之后出现的所有同级 div 元素都会被选中

<style>
  p ~ div {
    height: 300px;
    background-color: red;
  }
</style>

<div class="container">
    <p></p>
    <div></div>
    <ul>
      <li>
        <!-- 这个 div 不会被选中 -->
        <div></div>
      </li>
    </ul>
    <div></div>
</div>
2.3.2. +(加号)

p + div 是指 p 之后相邻的同级 div 元素（div 只会选中一个）

<style>
  p + div {
    height: 300px;
    background-color: red;
  }
</style>
<div class="container">
  <div></div>
  <p></p>
  <!-- 只有该 div 会被选中 -->
  <div></div>
  <div></div>
  <ul>
    <li>
      <div></div>
    </li>
  </ul>
  <div></div>
</div>
2.4. 交集选择器
p.f12 {
    font-size: 12px;
}
2.5. 并集选择器

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过 , 连接而成的，通常用于集体声明。

  • 任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。
  • 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
.one, p, #test {
    color: #F00;
}
2.6. 伪类选择器

伪类用于定义元素的特殊状态。

2.6.1. 动态伪类
  • E:link：匹配元素被定义了超链接且未被访问过，常用于链接描点上。（超链接点击之前）
  • E:visited：匹配元素被定义了超链接且已被访问过，常用于链接描点上。
  • E:active：匹配元素被激活时。常用于链接描点和按钮上
  • E:hover：用户鼠标悬停在元素E上
  • E:focus：匹配元素获取焦点时，常用于表单 input、textarea 等。

注意：a 标签的四种伪类选择器的顺序为：a:link ，a:visited，a:hover ，a:active

2.6.2. 表单元素状态伪类
  • E:checked：选中状态，匹配选中的复选按钮或者单选按钮表单元素
  • E:enabled：启用状态，匹配所有启用的表单元素
  • E:disabled：禁用状态，匹配所有禁用的表单元素

四、font字体

1. font-size

  • font-size属性用于设置字号(字体大小)
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。
body { font-size:16px; }

2. font-family

用于设置使用哪一种字体，可以指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。

body { font-family: "Microsoft Yahei", Arial;}

CSS Unicode字体

font-family: "\5FAE\8F6F\96C5\9ED1";   表示设置字体为“微软雅黑”。
  • 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
  • xp 系统不支持 类似微软雅黑的中文。
  • 解决方案：英文来替代。比如font-family:"Microsoft Yahei"。在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

3. font-weight

属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100~900400 等同于 normal，而 700 等同于 bold (数字表示粗细用的多)

4. font-style

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性作用
normal默认值，浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式。

5. font:综合设置字体样式

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}
  • 注意：使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
  • 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用。

五、字体外观属性

1. color

color属性用于定义文本的颜色

描述属性值
预定义的颜色值red，green，blue，pink
十六进制#FF0000，#FF6600，#29D794
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

2. text-align

text-align属性用于设置文本内容的水平对齐方式，相当于html中的align对齐属性。

属性解释
left左对齐（默认值）
right右对齐
center居中对齐

3. line-height

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

图片

图片

行高测量

行高 = 上距离 + 内容高度 + 下距离，上距离和下距离总是相等的，因此文字看上去是垂直居中的。

行高与高度的三种关系

  • 如果行高 等于 高度，文字会 垂直居中
  • 如果行高 大于 高度，文字会 偏下
  • 如果行高 小于 高度，文字会 偏上

4. text-indent

用于设置首行文本的缩进

  • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。
  • 建议使用em作为设置单位。
  • 1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度
p {
  /*首行缩进2个字  em  1个em 就是1个字的大小*/
  text-indent: 2em;  
 }

5. text-decoration

通常我们用于给链接修改装饰效果

值描述
none默认。定义标准的文本。取消下划线（最常用）
underline定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline定义文本上的一条线。（不用）
line-through定义穿过文本下的一条线。（不常用）

六、标签显示模式(display)

标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。

标签显示模式转换

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

1. 块级元素(block)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

  • 独占一行
  • 高度，宽度，外边距以及内边距都可以控制。
  • 宽度默认是容器(父级宽度)的100%
  • 是一个容器及盒子，里面可以放行内或者块级元素
  • 注意：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6，dt,它们都是文字类块级标签，里面不能放其他块级元素。

2. 行内元素(inline)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签最典型的行内元素。

行内元素的特点

  • 相邻行内元素在一行上，一行可以显示多个。
  • 高度、宽度直接设置是无效的。
  • 默认高度就是它本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素。

注意

  • 链接里面不能再放链接
  • 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

3. 行内块元素(inline-block)

在行内元素中有几个特殊的标签<img>、<input >、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点

  • 和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个
  • 默认宽度就是它本身内容的宽度。
  • 高度，行高，外边距以及内边距都可以控制。

4. 三种模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

七、CSS三大特性

1. 层叠性

概念

  • 所谓层叠性是指多种CSS样式的叠加
  • 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则

  • 样式冲突时，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。也就是后面的样式会覆盖前面的

2. 继承性

概念

  • 子标签会继承父标签的某些样式，如文本颜色和字号。
  • 想要设置一个可继承的属性，只需将它应用于父元素即可。

注意

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3. 优先级

概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

  • 选择器相同，则执行层叠性
  • 选择器不同，就会出现优先级的问题。

权重计算公式

  • 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
  • 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
标签选择器计算权重公式
继承或者 *0,0,0,0
标签、伪元素选择器0,0,0,1
类、伪类、属性选择器0,0,1,0
ID选择器0,1,0,0
行内样式 style=“”1,0,0,0
!important 最重要的∞ 无穷大

权重叠加

 div ul  li   ------>      0,0,0,3
 .nav ul li   ------>      0,0,1,2
 a:hover      -----—>      0,0,1,1
 .nav a       ------>      0,0,1,1

继承的权重是0

  • 我们修改样式，一定要看该标签有没有被选中
  • 如果选中了，那么以上面的公式来计权重。谁大听谁的。
  • 如果没有选中，那么权重是0，因为继承的权重为0.

八、布局

CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位

1. 普通流（标准流）

  • 块级元素会独占一行，从上向下顺序排列
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

2. 浮动

2.1. 什么是浮动
  • 脱离标准普通流的控制，（浮）移动到指定位置（动）— 俗称脱标
  • 浮动的盒子 不再占用原来的位置
2.2. 语法
选择器 { float: 属性值; }
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议: 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

2.3. 作用
  • 让多个盒子水平排列成一行，使得浮动称为布局的重要手段。
  • 可以实现盒子的左右对齐等等。
  • 浮动最早是用来控制图片，实现 文字环绕图片 效果。
  • float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。
2.4. 浮动小结
特点说明
浮加了浮动的盒子 「是浮起来」 的，漂浮在其他标准流盒子的上面。
漏加了浮动的盒子 「是不占位置的」，它原来的位置 「漏给了标准流的盒子」。
特「特别注意」：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙
2.5. 清除浮动

为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
  • 清除浮动本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

选择器 { clear: 属性值; }
属性值描述
left清除左侧浮动的影响
right清除右侧浮动的影响
both这个是最常用的，同时清除左右两侧浮动的影响

  • 额外标签法(隔墙法)，是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>

    • 优点：通俗易懂，书写方便
    • 缺点：添加许多无意义的标签，结构化较差
    1. 父级添加overflow属性方法
    • 可以给父级添加：overflow为 hidden| auto| scroll 都可以实现
    • 优点：代码简洁
    • 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
    1. 使用after伪元素清除浮动，是方式一的升级版，好处是不用单独加标签了
    .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

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

3. 定位

3.1. 什么是定位
  • 脱离标准普通流的控制，将盒子 「定」 在某一个 「位」 置 — 俗称 定位
  • 绝对 、固定 定位的盒子 不再保留原来的位置
  • 定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移
3.2. 边偏移

边偏移 需要和 定位模式 联合使用，单独使用无效

边偏移属性示例描述
toptop: 80px「顶端」偏移量，定义元素相对于其父元素「上边线的距离」。
bottombottom: 80px「底部」偏移量，定义元素相对于其父元素「下边线的距离」。
leftleft: 80px「左侧」偏移量，定义元素相对于其父元素「左边线的距离」。
rightright: 80px「右侧」偏移量，定义元素相对于其父元素「右边线的距离」
3.3. 定位模式
选择器 { position: 属性值; }
值语义
static「静态」 定位（默认）
relative「相对」 定位
absolute「绝对」 定位
fixed「固定」 定位
sticky「粘性」 定位

  • 静态定位(static)

    • 静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。
    • 静态定位 按照标准流特性摆放位置。它没有边偏移。
    • 静态定位在布局时几乎不用

  • 相对定位(relative)

    • 相对定位是元素相对于它原来在标准流中的位置来说的。
    • 相对于自己原来在标准流中位置来移动的
    • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

  • 绝对定位(absolute)

    • 是元素以带有定位的父级元素来移动位置，父元素的定位模式可以是 任意模式
    • 父元素没有定位，则以浏览器为准定位(Document文档)。
    • 绝地定位后会脱离标准流，不再占用原来的位置
    • 定位口诀：子绝父相，一般布局时父元素的定位模式为 relative

  • 固定定位(fixed)

    • 固定定位是绝对定位的一种特殊形式;
    • 固定定位后会脱离标准流，不再占用原来的位置
    • 只认浏览器的可视窗口–浏览器可视窗口+边偏移属性来设置元素的位置
      • 跟父元素没有任何关系；单独使用
      • 不随滚动条滚动

  • 粘性定位(sticky)

    • 可以被认为是相对定位和固定定位的混合
    • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
    • 粘性定位 占有原来的位置（相对定位特点）
    • 必须添加 top，left，right，bottom中的其中一个，如果不添加则会当做 相对定位
    • 兼容性较差，IE不支持
3.4. 堆叠顺序（z-index）
  • 在使用 「定位」 布局时，可能会 「出现盒子重叠的情况」。
  • 加了定位的盒子，默认 「后来者居上」， 后面的盒子会压住前面的盒子。
  • 应用 z-index 层叠等级属性可以 「调整盒子的堆叠顺序」。

特性如下

  • 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  • 如果属性值相同，则按照书写顺序，后来居上；
  • 数字后面不能加单位
  • z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
3.5. 定位改变display属性

前面提过， display 是 显示模式， 可以通过以下方式改变显示模式:

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
  • 绝对定位 和 固定定位 也和浮动类似， 默认转换的特性，转换为行内块。

所以说， 一个行内的盒子，如果加了 「浮动」、「固定定位」 和 「绝对定位」，不用转换，就可以给这个盒子直接设置宽度和高度等。

3.6. 定位小结
定位模式是否脱标占有位置移动位置基准模式转换（行内块）使用情况
静态static不脱标，正常模式正常模式不能几乎不用
相对定位relative不脱标，占有位置相对自身位置移动不能基本单独使用
绝对定位absolute完全脱标，不占有位置相对于定位父级移动位置能要和定位父级元素搭配使用
固定定位fixed完全脱标，不占有位置相对于浏览器移动位置能单独使用，不需要父级

九、盒子模型

网页布局的本质

  • 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
  • 最后把网页元素比如文字图片等等，放入盒子里面。
  • 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
  • 标准 w3c 盒子模型的范围包 内容（content）、边框（border）、内边距（padding）、和 外边距（margin） 组成。
  • 盒子里面的文字和图片等元素是 内容区域
  • 盒子的厚度 我们称为为盒子的边框
  • 盒子内容与边框的距离是内边距
  • 盒子与盒子之间的距离是外边距

W3c标准盒子模型
当设置为 box-sizing: content-box; 时，将采用标准模式解析计算，也是默认模式；

  • 宽度：Element Height = content height + padding + border （Height为内容高度）
  • 高度：Element Width = content width + padding + border （Width为内容宽度）

1. 盒子边框(border)

属性作用
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜色

边框的样式：

  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

边框综合设置

border : border-width || border-style || border-color 
border: 1px solid red;  没有顺序要求

盒子边框写法总结表：
很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框下边框左边框右边框
border-top-style:样式;border-bottom-style:样式;border-left-style:样式;border-right-style:样式;
border-top-width:宽度;border- bottom-width:宽度;border-left-width:宽度;border-right-width:宽度;
border-top-color:颜色;border- bottom-color:颜色;border-left-color:颜色;border-right-color:颜色;
border-top:宽度 样式 颜色;border-bottom:宽度 样式 颜色;border-left:宽度 样式 颜色;border-right:宽度 样式 颜色;

边框合并
通常表格两个单元格之间的边框会出现重叠，从而使边框变粗，这时就可以通过css属性把重叠的边框合并到一起

border-collapse: collapse;

2. 内边距(padding)

padding属性用于设置内边距。是指边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

padding简写

值的个数表达意思
1个值padding：四个内边距都相同
2个值padding: 上下，左右
3个值padding：上，左右，下
4个值padding: 上，右，下，左

3. 外边距（margin）

margin属性用于设置外边距。margin就是控制 盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
  • margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
  • 行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。

块级盒子水平居中

  • 盒子必须指定宽度（width）
  • 然后就给左右的外边距都设置为 auto

外边距合并
使用margin定义块元素的 「垂直外边距」 时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，而是取 两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并
图片

解决方案：尽量给只给一个盒子添加margin值

嵌套块元素垂直外边距的合并（塌陷）

  • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
  • 父元素的上外边距会与子元素的上外边距发生合并
  • 合并后的外边距为两者中的较大者
    图片

「解决塌陷方案」

  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow: hidden。

4. 圆角边框(border-radius)

单独分开写法

属性描述
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-right-radius右下角
border-bottom-left-radius左下角

复合写法

border-radius: length;
值描述
四个值左上，右上，右下，左下
三个值左上，右上、左下，右下
两个值左上、右下，右上、左下
一个值四个圆角值相同
  • 其中每一个值可以为 数值或百分比的形式。
  • 技巧：让一个正方形 变成圆圈 border-radius: 50%;

5. 盒子阴影(box-shadow)

box-shadow: offset-x offset-y [blur [spread]] [color] [inset]
值描述
offset-x阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur可选。阴影模糊距离，不能取负数。（影子模糊的虚实，0就是纯实的，值越大阴影越虚）
spread可选。阴影大小
color可选。阴影的颜色
inset可选。表示添加内阴影，默认为外阴影
/* 百度PC端头部阴影 */
.header{
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

注意

  • 默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影失效
  • 盒子阴影不占用空间，不会影响其他盒子的排列

6. 文字阴影(text-shadow)

text-shadow: offset-x offset-y [blur] [color]
值描述
offset-x阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur可选。阴影模糊距离，不能取负数。（影子模糊的虚实，0就是纯实的，值越大阴影越虚）
color可选。阴影的颜色

十、元素显示和隐藏

1. display

display 设置一个元素应如何显示

  • display: none; : 隐藏元素（隐藏之后，不再保留位置。）
  • display: blokc; : 除了转换为块级元素之外，同时还有显示元素的意思。

2. visibility

指定一个元素应可见还是隐藏

  • visibility：visible; : 元素可视
  • visibility：hidden; : 隐藏元素（隐藏之后，继续保留原有位置。）

3. overflow (溢出)

设置当元素的内容超过其指定高度及宽度时如何管理内容。

属性值描述
visible不剪切内容也不添加滚动条（默认）
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

使用场景

  • 清除浮动
  • 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

十一、用户界面样式

所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。

1. 鼠标样式

设置在元素上移动的鼠标指针采用何种系统预定义的光标形状。

cursor: 属性值
属性值描述
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止

2. 轮廓线 outline

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。最直接的写法是 ：outline: 0; 或者 outline: none;

3. 防止拖拽文本域resize

主要作用于表单的多行文本框，默认是可拖拽的

<textarea  style="resize: none;"></textarea>

4. vertical-align 垂直对齐

vertical-align 垂直对齐，它只针对于 「行内元素」 或者 「行内块元素」

  • 有宽度的块级元素居中对齐，是margin: 0 auto;
  • 让文字居中对齐，是 text-align: center;
属性值描述
baseline默认。元素放置在父元素的基线上。
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
ㄑ 流年.似ツ水 .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
头歌教学实践平台 Web前端开发基础 CSS-基础知识
01-20
头歌教学实践平台 Web前端开发基础 CSS-基础知识。源码txt格式。
头歌教学实践平台 Web前端开发基础 CSS-基础选择器
最新发布
01-20
头歌教学实践平台 Web前端开发基础 CSS——基础选择器。源代码txt格式。
网页布局
hongcaixia的博客
12-28 478
网页布局一、行布局1.基础的行布局<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ margin: 0; padding: 0; color: #fff; text-ali
css-day01笔记-CSS初识、基础选择器、文字和文本样式
xhqxhq_的博客
04-03 631
typora-copy-images-to: media 第01阶段.web基础：css-day01笔记-CSS初识、基础选择器、文字和文本样式 一、CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， ...
CSS入门一、初识
李宥的博客
01-11 608
- CSS 是`层叠样式表` ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言。 - CSS 主要用于设置 HTML 页面中的`文本内容`（字体、大小、对齐方式等）、`图片的外形`（宽高、边框样式、边距等）以及`版面的布局和外观显示样式`。 - CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：`CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。`
在head标签内css代码,怎么在head区域引入css
weixin_31860143的博客
08-03 2019
引入方法：1、使用style标签引入，语法“css代码 ”；2、使用link引入，语法“”。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在head区域引入css有两种方法：内部样式表--用style标签定义外部样式表--用link标签引入1、内部样式表--用style标签定义将css代码集中写在HTML文档的head头部标签中，并且用styl...
HTML设置表格里文字的边距
akazhuk的专栏
05-05 2万+
就是希望表格里的字体不要挨左边的线那么近。 下面是CSS里的代码，用于作表格的style。.table-css{ margin-top: 5px; font-family: "Calibri"; font-weight:bold; } .table-css tr td{ padding-left: 2px; }或者下面这样是设置文字两边的间距：table-css t
postcss-url:PostCSS插件以对url（）进行基础设置，内联或复制资产
05-02
安装$ npm install postcss postcss-url基本示例-变基// dependenciesconst fs = require ( "fs" )const postcss = require ( "postcss" )const url = require ( "postcss-url" )// css to be processedconst css = ...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
HTML---CSS----基础知识及代码----各种小程序网页设计
css-patterns
06-04
我们几乎在我们构建的每个项目中都使用这些技术，它们为我们构建 CSS 奠定了良好的基础。 此外，一段时间以来，我们一直在编译一个常用 CSS 模式库。 我们注意到我们在所有项目中重复使用不同的模式来产生效果和...
利用CSS设置小于12px的文字 解决常用浏览器字体大小
鹏仔工作室的秘密基地
09-20 8489
谷歌浏览器Chrome是Webkit的内核，之前，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。 CSS代码定义如下： -webkit-text-size-adjust:none; 但是，在现在最新版的谷歌里，已经不在支持这个属性啦。   所以css又出了新的属性：transform:scale() ...
html设置输入框比例,css – 如何设置边框的厚度百分比？
weixin_42116650的博客
06-04 495
边框不支持百分比…但它仍然可能…'border-top-width','border-right-width','border-bottom-width','border-left-width'Value: | inheritInitial: mediumApplies to: all elementsInherited: noPercentag...
前端解决宽度设置百分比和边框后样式超出的问题
zzqz的博客
09-30 2107
项目中经常会遇到一类问题：就是设置宽度百分比后再加border边框出现边框溢出显示不出的问题 原因很简单，就是宽度已经是百分百了，再设边框，实际内容就是百分百再加上边框的宽度，肯定就溢出了 这个问题很好解决，一个属性就搞定：calc div { width: calc(~"100% - 2px"); border: 1px solid #eee; } 注意： 以上代码即可实现，但是必...
html文字左右边距怎么设置,html内容左右边距怎么设置
weixin_42188533的博客
06-11 2万+
在html中，可以使用padding属性设置内容左右边距，只需要给元素设置“padding:0 数值+单位|百分比数值”即可。padding属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。padding属性不允许指定负边距值。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。首先新建一个HTML文件，然后在里面创建一个div块，设置背景颜...
css padding 边框与文字的间距
zb219的专栏
05-12 7195
css padding 边框与文字的间距border-collapse:collapsedsfdsfdsfsdf段前段后
HTML边距设置之padding和margin
热门推荐
jimsonhappy的专栏
09-25 4万+
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）pad
html中设置字离上边距怎么设置,html怎么设置水平线与文字的距离
weixin_35997503的博客
06-30 8195
在html中，可以通过在水平线标签中，使用style属性添加外边距样式来设置水平线与文字的距离。而外边距样式可以使用margin、margin-top或margin-bottom属性来设置。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。html设置水平线与文字的距离文字--没有设置距离文字文字文字文字文字文字文字效果图：说明：1、margin属...
html单元格间距文本边框间距,css：border-spacing属性（表格边框间距）的示例代码分享...
weixin_29018335的博客
06-11 3572
一、border-spacing属性我们知道表格加入边框默认情况下是如下图那样的：我们在上一节讲解了如何合并表格边框(消除表格边框间距)。但是在实际开发中，我们有可能要设置一下表格边框的间距。在CSS中，我们使用border-spacing属性来定义表格边框间距。语法：border-spacing:像素值;说明：该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间...
css-palm 2.0
09-28
CSS-Palm 2.0是一种用于网页设计的CSS框架，它是CSS-Palm的更新版本。CSS-Palm是一个轻量级的框架，目的是帮助开发人员快速创建符合响应式设计的移动设备优先的网页。 CSS-Palm 2.0在1.0的基础上进行了改进和扩展，使得它更加灵活和易用。它可以帮助开发者构建各种类型的移动设备优先的网页，包括商务、博客、社交媒体等。 CSS-Palm 2.0提供了一系列预定义的CSS类和样式，开发人员可以根据自己的需求选择合适的类和样式来构建网页。这些类和样式能够自动适应不同的屏幕尺寸和设备，确保网页在不同设备上的显示效果一致性。 CSS-Palm 2.0还提供了一些有用的功能，如网格系统、响应式图像、媒体查询等，用于更好地控制网页的布局和显示效果。开发人员可以使用这些功能来创建自适应的网页，使得网页在不同设备上都能得到最佳的显示效果。 总而言之，CSS-Palm 2.0是一个强大而灵活的CSS框架，适用于构建移动设备优先的响应式网页。它提供了丰富的功能和预定义的CSS类和样式，帮助开发人员轻松实现网页布局和显示效果的自适应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值