css核心规则

用户4802193880053
106 阅读4分钟

css

1.引入方式
  • 外联: <link/>
  • 内嵌: <style></style>
  • 内联: 行内样式
2.选择器
  1. id选择器 ： #name
  2. class选择器 .name
  3. 属性选择器 [herf^='http']
  4. 伪类选择器
    • 某个标签的某个状态 input:focus a:active div:hover
    • 某个标签的结构 input::after input::before li:first-child li:last-child
  5. 标签选择器 div
  6. 通配符选择器 *
  7. 继承

user-select: none; 禁止复制文本

组合方式

* 并列选择器    div.name  满足属性为div同时类名为name    div#name 选中div同时id名为name
* 后代选择器    ul li     ul里面所有的li
* 子代选择器    ul>li    ul里面的儿子辈的li
* 兄弟选择器    div ~ a  选中a  和div平辈的a
* 相邻选择器    div + a   选中a   和div相邻的a 
* 选择器组      div,  p   两个都选中
3.属性

Snipaste_2022-09-05_14-29-37.png

字体

指定字体

@font-face {
	font-family:'myFontName', //自己指定的字体名
    src: url(https://fonts:gs.com/woff2)format('woff2'); //字体下载地址
}

font-family: ;

font-weight: 100 - 900; //字重

font-size: 12px;  //字体大小

font-style: normal; //正常  可设置斜体

line-height: 20px | 1.6 ; 自身字体的1.6倍
行高定义： 两行文字之间基准线的距离     base-line的距离

Snipaste_2022-09-05_14-47-39.png

空白符问题 -- 浏览器默认会把多个空格合并显示

white-space: normal | nowrap | pre | pre-wrap | pre-line;
normal 普通
nowrap 不换行
pre 保留所有的
pre-wrap 保留所有的并自动换行
pre-line 合并空格，但是保留换行
4.继承

某些属性如果自己没有会自动继承父元素的值 比如color

一般跟字体相关的都有继承（字体颜色，大小） ， 一般跟盒子模型相关的属性都不被继承（宽度）

显示继承

* {
    box-sizing: inherit;
}
html{
	box-sizing: border-box;
}
div{
    box-sizing: content-box; //那么这个div盒子里面的子盒子都是content-box
}

如果继承没有继承到 则是初始值

5.样式计算

Snipaste_2022-09-05_15-50-33.png

大概过程，先匹配所有符合的选择器取其中的值， 然后计算（权重，顺序）每条属性的最终值，最后作为该属性的计算值, 最后使用的时候 会把计算值转化为可以使用的值（转化单位）。

6. 布局相关技术
  • 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid 布局
  • 浮动
  • 绝对定位

Snipaste_2022-09-05_16-04-50.png

盒子模型

  • content 内容 单位 px 百分比 auto

  • padding 内边距 可设置4个方向 单位px 百分比 auto

  • border 边框 可设置4个方向 单位px 百分比 auto

  • margin 外边距 可设置 4个方向 单位px 百分比 auto

    margin-top 和 margin-bottom 重叠后只会取两者较大的一个

百分比都是相对于容器的宽度， 也就是父盒子

行 - 块

​ 行级

支持多个元素一行

width和height不生效

span em code

块级

不支持多个元素一行

支持所有盒子模型

div body section article ul li p h1-6

  1. 行级排版上下文

    • Inline Formatting Context(IFC)
    • 只包含行级盒子的容器会创建一个IFC
    • IFC内的排版规则
      • 盒子在一行内水平摆放
      • 一行放不下时，换行显示
      • text-align 决定一行内盒子的水平对齐
      • vertical-align 决定一个盒子在行内的垂直对齐
      • 避开浮动（float）元素

  2. 块级排版上下文

    • Block Formatting Context(BFC)

    • 某些容器会创建一个BFC

      • 根元素
      • 浮动，绝对定位，inline-block
      • Flex子项和Grid子项
      • overflow 值不是 visible 的块盒子
      • display: flow-root;

    • BFC内的排版规则

      • 盒子从上到下摆放
      • 垂直 margin 合并
      • BFC 内盒子的 margin 不会与外面合并 （利用bfc解决margin塌陷）
      • BFC 不会和浮动元素重叠

Flex Box

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 排列的方向
    • 摆放的顺序
    • 盒子的宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行 Snipaste_2022-09-05_19-44-45.png

Snipaste_2022-09-05_19-45-22.png

Grid布局

  • display:gird; 生成一个块级grid容器

  • grid-template 相关属性讲容器划分为网格

    grid-template-columns: 100px 100px 200px; 划分列

    grid-template-rows: 100px 100px 200px; 划分行

  • 设置每一个子项占哪些行/列

    .item{
	grid-row-start: 1;
	grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
    
    //简写
    grid-area: 1/1/3/3;
}

float

解决文字与图片结合排版时的问题

直接给图片加上float

绝对定位

position

  • static 默认值，非定位元素
  • relative 相对自身位置偏移，不脱离文档流（top, left）
  • absolute 绝对定位, 相对非static 祖先元素定位
  • fixed 相对于视口（viewport）绝对定位
7.总结

总结一下css布局规则， 大致分为 行级排版上下文（IFC）， 块级排版上下文(BFC)，flex布局上下文， grid， float, position。 触发行级排版上下文的条件是任一一个盒子内子元素全部为行内元素，触发块级排版上下文的条件则是 overflow 为不 visible 或者flex/grid产生的子项，被浮动或者绝对定位的盒子（可以视为默认排版方式为BFC), flex/grid/float/position 布局则是 display 设置为 flex/grid, 或者容器被设置浮动或定位的容器本身上下文改变。

此为学习笔记，仅供参考。

avatar
文章
阅读
粉丝