【CSS知识分享-细】

最新推荐文章于 2024-04-28 11:04:29 发布

油炸苹果圈

最新推荐文章于 2024-04-28 11:04:29 发布

阅读量354

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_61516787/article/details/122538506

版权

css是什么？

css全称：Cascading Style Sheets 用以定义页面元素样式。

h1 {
  color:white;
}
h1：选择器（selector）。表示这个样式针对哪个对象。
color：属性（property）。
white：属性值（value）。
color:whilte;：一条声明（declaration）。

如何使用css？
1、外链（可以实现内容和样式分离）

<link ref = "stylesaheet" href = "css/style.css">

2、嵌入

<style>
  div {
    width:400px;
<style>

3、内联

<p style = "font-size:24px;"></p>

css如何工作？
选择器（selector）
通配选择器

*：面对所有元素
* {
  margin:0;
  padding:0;
}

id选择器

id = "demo"

#demo{
  color:red;
}

类选择器

class = "demo" 

.demo {
  color:blue;
 }

属性选择器

<input type = "text" disabled>

<style>
  [disabled] {
     border:1px solid red;
   }
</style>
[disabled] 表示：只要标签中包含disabled属性即拥有border:1px solid red的样式。

input[type = "password"] {
  background-color:#fff;
  }
input[type = "password"] 表示：凡是type属性的属性值为password的input输入框都设置背景颜色为#fff;

延伸：

a[href ^= "#"]{
  color:red;
};
a[herf $= ".jpg"]{
  color:black;
};
a[href ^= "#"]表示：链接地址以#开头的超链接都有color：red的样式；
a[herf $= ".jpg"]表示：链接地址以.jpg结尾的超链接都有color:black的样式。

伪类选择器
状态伪类选择器，在不同状态下变换不同样式。如：

a:link //默认样式
a:visited //a链接已经被访问过后的样式
a:hover //悬停样式
a:active //a链接按下事件触发时的样式
:focus //获取焦点事件触发时的样式

结构伪类
根据DOM节点在DOM树的位置选择。

div:first-child;
div:last-child;
first-child表示；处于第一个位置的某个元素（这里指第一个div）
last-child表示：处于最后一个位置的某个元素（这里指最后一个div）

相对父级节点的相对位置
一般用组合标签

<input class = "error">
<input type = "text">

<style>
input.error{
    border:1px solid red;
  }
</style>

文字样式、文字颜色、RGB这里就不过多赘述。
HSL HSL全称：
Hue-Saturation-Lightness
色相 - 饱和度 - 亮度

字体font-family
规则：字体列表最后要写上通用字体族；英文字体要放在字体前面；引用外部字体样式一般用于英文字体，因为中文字体文件较大。

@font-face{
  font-family : "demo";
  src = url(""); 
  format("woff2");
}

h1 {
  font-family:"demo";
}

字体大小font-size
关键字：small、medium、large；
长度：px、em（相对父元素）；
百分数：相对父元素。
字体粗细font-weight
关键字：normal、bold；
px
行高line-height
div{
font-size:20px;
line-height:1.6;
}
此时：line-height = 32px

简写 font:weight size/line-height family
（斜体粗细大小/行高字体）

间距
letter-spacing：字符之间的距离；
word-spacing：单词之间的距离；
缩进text-indent
文字修饰text-decoration
underline：下划线；
line-through：删除线；
overline：上划线
空白符white-space决定空格和换行是否保留
nowrap：不换行，会出现横向滚动条；
pre：保留空格个换行；
pre-wrap：会换行（如果一行内显示不下换行）；
pre-line：会换行，但是会合并空格。

深入css

选择器的特异度（specificity）
例：

<h1 class = "title"></h1>

<style>
  h1 {
    color:red;
  };
  .title {
   color:blue;
   }
</style>

思考：这两个样式哪个会生效？
以id （伪）类标签为顺序。
h1 0 0 1 =>1
.title 0 1 0 => 10
10 > 1 所以.title生效。

继承
继承是指：某些属性会自动继承其父元素的计算值，除非显示指定一个值。注意，盒模型的尺寸不可继承，如width、height。
显示继承：

*{
  box-sizing:inherit; //本不可继承
}

html{
  box-sizing:border-box; //html内的所有元素默认border-box
}

初始值
初始值是指：css中每个属性都有一个初始值（可使用initial重置为初始值）。
css求值过程
（css原理，即解析DOM树后如何将对应节点渲染样式，生成渲染树）

布局

确定内容大小和位置的算法；
依据元素、容器、兄弟节点和内容等信息来计算。
布局模式
1、常规流 – 行级、块级、表格布局、flexBox、Grid布局；
2、浮动（float）布局；
3、绝对定位。

padding属性
作用：确定元素四个方向的内边距；
顺序分别为：上右下左；
一个例子：如果要实现多终端一个盒模型始终保持宽高为1:1，如何做？

div{
  height : 0;
  padding-top:100%;
  padding-top:100%表示相对于容器，内边距为容器的宽的百分百。
  }

一个例子！！！！css写出一个三角形！！

div{
   wdith:0;
   height:0;
   border-top:1px solid red;
 }

margin属性

margin：auto => 盒模型水平居中
margin collapse 边距合并/折叠，在垂直方向同时存在margin-top和margin-bottom时，取较大值。
举例：

<div class="a"></div>
<div class="b"></div>

<style>
      .a {
        border: 1px solid red;
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
      }

      .b {
        border: 1px solid blue;
        width: 100px;
        height: 100px;
        margin-top: 100px;
      }
    </style>

在这里插入图片描述

box-sizing属性
box-sizing:border-box：width和height包含了padding、border在内。如果width：100%，则内容的width<100%。

<style>
    div {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 10px solid red;
      }
</style>

在这里插入图片描述

overflow属性
visible：若内容溢出，不隐藏。
hidden：若内容溢出，隐藏，且没有滚动条。
scroll：不管内容是否溢出，都有滚动条。

块级盒子与行级盒子的区别？

块级盒子
全称：Block Level Box

不和其他合资并列摆放；
使用所有的盒模型属性；
常见会生成块级盒子的块级元素：body、aside、div、main、section、h1~h6、p、ul、li。

行级盒子
全称：Inline Level Box

一些行级盒子放在一行或拆开成多行；
width、height不适用；
常见会生成行级盒子的行级元素：span、em、strong、cite、code

常规流常见的布局？
行级摆放上下文（IFC）
全称：Inline Formatting Content

盒子在一行内水平摆放；
一行放不下就换行；
vertical-align控制垂直对齐（有基线）；
text-align控制水命对齐；
需要避开float浮动元素。

实现图片、文字居中对齐

verti-align:middle;

块级摆放上下文（BFC）

全称：Block Formatting Content

盒子从上到下排列；
垂直方向的margin许合并；
BFC内盒子的margin不会与外面的margin合并；
BFC不会和float浮动重叠。

Flex Box

盒子的摆放流向？
盒子的摆放顺序？
width和height？
水平和垂直方向的对齐？
是否允许拆行？

摆放顺序

flex-direction: row/row-reverse/volumn/volumn-reverse

水平对齐（主轴）

justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly

垂直对齐（侧轴）

align-item:flex-start/flex-end/center/stretch(拉伸)/baseline(基线）

某一个子元素设置垂直属性align-self
flexibility 子项的弹性
容器有剩余空间，会伸展，否则会收缩

flex-grow：有剩余空间的伸展能力；
flex-shrink：空间不足时的收缩能力；
flex-basis：基础长度

其中，flex-shrink为0时，说明盒子不可被压缩（为刚性盒子），会压缩其他的盒子以达到该刚性盒子的宽高要求。
简写 flex:grow shrink basis
例子：

flex:1 100px // grow/basis
flex:1 0 100px //grow/shrink/basis

Grid布局

display:grid即可生成一个块级的grid容器。 grid-template：相关属性将容器划分成网格。

display: grid;
grid-template-columns: 30px 30px auto;
grid-template-rows: 20px 20px auto;

在这里插入图片描述

绝对定位

position：relative/absolute/static/fixed
relative ：在常规流布局。可以设置top、left、bottom、right来调整偏移长度。
absolute：脱离常规流（文档流）。相对于最近的非static祖先元素定位。（一般为父级）。不会对流内元素布局造成影响。不设置top、left的话，会放在原来应该在的位置。（可能会有覆盖的情况出现）。
fixed：相对于视口（一般为屏幕）定位（滚动时它不动）。

油炸苹果圈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS知识分享-细】

css是什么？css全称：Cascading Style Sheets 用以定义页面元素样式。h1 { color:white;}h1：选择器（selector）。表示这个样式针对哪个对象。color：属性（property）。white：属性值（value）。color:whilte;：一条声明（declaration）。如何使用css？1、外链（可以实现内容和样式分离）<link ref = "stylesaheet" href = "css/style.css"&.
复制链接

扫一扫