代码编织梦想

CSS的继承-层叠-类型和CSS盒子模型

一.伪元素

1.1. ::first-line/::first-letter

  • ::first-line 可以针对首行文本设置属性
  • ::first-letter可以针对首字母设置属性

1.2. ::before/::after

  • 插入内容
  • 插入图片
  • 方格
    • content不能省略
    • 行内非替换元素不能设置宽高;需要display:inline-block

二.继承-层叠-元素类型

2.1. CSS属性继承

  • 继承:如果我们给某一个元素设置了某个CSS属性,而该属性具有继承性,那么该元素的所有子元素会默认继承该属性
  • 有哪些继承属性?不需要记
    • 一般和文字/字体相关的很多属性都具备继承属性

    • 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
      在这里插入图片描述

    • mdn官方文档有说明是否具有继承性
      - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOfWSnZ4-1675262115863)(C:\Users\xudun\AppData\Roaming\Typora\typora-user-images\image-20230201222547719.png)]

2.2. CSS属性层叠

  • 一个CSS属性可以多次设置

    • 判断一:权重,优先级
    • 判断二:先后顺序
  • 常见的选择器

    • !important -> 10000
    • 内联 -> 1000
    • id -> 100
    • 类/伪类/属性 -> 10
    • 元素 -> 1
    • 通配 -> 0

2.3. 元素的类型

  • 块级元素
  • 行内级元素
  • 有本质区别 -> display:block
  • 可以相互转换

display:

  • block

    • 独占一行(父元素)
    • 可以设置宽度和高度
    • 默认高度是内容的高度
  • inline-block

    • 和其他行内级元素在同一行显示
    • 可以设置宽度高度
    • 默认宽高由内容决定
  • inline

    • 和其他行内级元素在同一行显示
    • 不能设置宽高
    • 宽高由内容决定

2.4. 元素的隐藏方法

  • display:none
  • visibility:hidden
  • rgba -> alpha
  • opacity -> 设置透明度
    • 所有的子元素都会跟着一起设置

2.5. overflow

  • visible
  • hidden
  • scroll
  • auto

2.6. HTML嵌套的规范

  • 块级/行内块级可以嵌套其他元素
  • p元素不能嵌套div元素
  • 行内级元素不能嵌套块级元素

三.盒子模型

3.1. 认识盒子模型

  • 照片墙
    在这里插入图片描述

  • HTML元素都是盒子,我们可以把HTML每一个元素看出一个个的盒子:
    在这里插入图片描述

  • 盒子模型的组成属性

    • content

    • padding

    • border

    • margin

在这里插入图片描述

3.2. content

  • width/height
  • width:auto 默认值是auto
  • min-width/max-width

3.3. padding

内边距:

  • 四个方法

  • padding

    • 上/右/下/左
      在这里插入图片描述

3.4. border

边框

  • width
  • style
  • color
div{
    border:10px solid red;
}

在这里插入图片描述

3.5. border-radius

圆角:

  • 具体的值,比如10px

  • 百分比 -> border box

    • 50%
  • border-radius事实上是一个缩写属性:

    • 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottomleft-radius 简写为一个属性。

    • 开发中比较少见一个个圆角设置;
      在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39416206/article/details/128841815

css-day03笔记-css三大特性&css盒子模型_zhangjunzongque的博客-爱代码爱编程

— typora-copy-images-to: media 第01阶段.WEB基础:css-day03笔记-CSS三大特性&CSS盒子模型 CSS-day03笔记-盒子模型 CSS学习三大重点: C

Web前端基础---CSS样式--盒子模型--浮动与定位-爱代码爱编程

Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML 文档内大块(block-level)的内容提供结构和背景的元素。即<div> 标签。 CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来

前端学习day03--CSS-爱代码爱编程

CSS的学习 HTML的局限性CSS--网页的美容师CSS语法规范CSS代码风格CSS基础选择器类选择器多类名id选择器通配符选择器CSS字体属性字体系列字体字体大小字体粗细文字样式字体的复合属性文字对齐 HTML的局限性 丑 繁琐、臃肿 CSS–网页的美容师 层叠样式表(Cascading Style Sheets),也是一种标记语言

2022黑马程序员-前端学习第一阶段(Day03-CSS基础)-爱代码爱编程

CSS基础-Day03 学习笔记打卡 CSS基础基础认知CSS知识CSS引入方式(三种)基础选择器标签选择器类选择器id选择器类与id选择器的区别通配符选择器字体和文本样式字体样式文本样式line-height行高Chrome调试工具颜色取值(扩展)综合案例代码示例 学习视频B站:黑马程序员-前端学习(第一阶段) CSS基础 基础认知 C

2022黑马程序员-前端学习第一阶段(Day04-CSS进阶)-爱代码爱编程

CSS进阶-Day04 学习笔记打卡 CSS进阶选择器的进阶复合选择器后代选择器:空格子代选择器:>并集选择器:,交集选择器:紧挨着hover伪类选择器Emmet语法背景相关属性背景颜色背景图片背景平铺背景位置背景相关属性的连写形式(拓展)img标签和背景图片的区别元素显示模式块级元素行内元素行内块元素元素显示模式转换拓展1:HTML嵌套规范

前端自学day07-css布局(定位装饰)笔记整理-爱代码爱编程

课程:(b站)黑马程序员【前端HTML5+CSS3+移动web全套教程】 day07 能够说出定位的常见应用场景能够说出不同定位方式的特点能够使用子绝父相完成元素水平垂直案例能够写出三种常见的光标类型(cursor)能够使用圆角边框属性完成正圆和胶囊按钮效果能够说出display和visibility让元素本身隐藏的区别 一、定位 目标:能够说出四

2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)-爱代码爱编程

CSS布局-盒子模型-Day05 学习笔记打卡 CSS布局CSS三大特征继承性(拓展)继承的应用(拓展)继承失效的特殊情况层叠性优先级权重叠加计算PxCook的基本使用盒子模型盒子模型的介绍内容的宽度和高度边框(border)边框-单个属性边框-连写边框-方向设置盒子实际大小初级计算公式内边距( padding )内边距(padding)- 取值内

css学习day2-字体和文本样式_什么时候养猫猫的博客-爱代码爱编程

-字体和文本样式 目标:使用字体和文本相关样式修改元素外观样式 <style> p{ font-size: 30px; } </style> </head> <body> <!-- 默认字号是16 -->

day14-css盒子模型-爱代码爱编程

目标 能够准确阐述盒子模型的四个组成部分 能够利用边框复合写法给元素添加边框 能够计算盒子的实际大小 能够利用盒子模型布局模块案例 能够给盒子设置圆角边框 能够给盒子添加阴影 能够给文字添加阴影 目录 盒子模型 PS基本操作 综合案例 圆角边框 盒子阴影 文字阴影 盒子模型 页面布局学习的三大核心——盒子模型、浮

2022黑马程序员-爱代码爱编程

CSS布局 (定位+装饰)-Day08 学习笔记打卡 CSS布局 (定位+装饰)定位定位的基本介绍定位的基本使用静态定位相对定位绝对定位子绝父相介绍固定定位不同定位的特点元素的层级关系 装饰垂直对齐方式

day05-爱代码爱编程

CSS-03-盒子模型 盒子模型 CSS三个大模块:盒子模型、浮动、定位 1.盒子模型 继承性、层叠性、优先性 把HTML页面中布局的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒模型本质上是一个盒子

【web前端第二阶段-爱代码爱编程

【Web前端第二阶段–CSS】Day03 第一章 【Web前端第二阶段–Html】Day01 第二章 【Web前端第二阶段–Html】Day02 文章目录 【Web前端第二阶段--CSS】Day03前言

【web前端第二阶段-爱代码爱编程

【Web前端第二阶段–CSS高级】Day04 第一章 【Web前端第二阶段–Html】Day01 第二章 【Web前端第二阶段–Html】Day02 第三章 【Web前端第二阶段–CSS】Day03 文章目录

day05-爱代码爱编程

CSS布局-盒子模型 一、CSS三大特性3.1 优先级的介绍3.2 权重叠加计算3.3 (拓展)权重叠加计算案例4.1 Chrome调试工具二、PxCook的基本使用三、盒子模型1.1 盒子模型的介绍2.1 内

web前端105天-爱代码爱编程

day04 目录 前言 一、复习 二、CSS 1.CSS概念 2.css引用方法 3.CSS语法  二、css选择器 1.通用选择器 2.标签选择器  3.类选择器【重点】  4.id选择器  5.群组选择器  6.后代选择器 7.兄弟选择器 8.伪类【重点】 9.伪元素  三、css的优先级 1.原则 2

web前端105天-爱代码爱编程

day05 文章目录 前言一、复习二、元素和尺寸1.元素的性质2.元素的显示属性【重点】3.尺寸4.边框5.内间距6.外间距7.外间距的重叠现象8.盒子模型的计算9.溢出10.CSS中BFC

css(day32)-爱代码爱编程

1.CSS 简介 中文名:层叠样式表 作用:美化HTML标签 1.1书写位置 方式1: 在标签的style属性中书写 因为这样的方式,编写的样式无法给别的标签使用,此时代码就会冗余 这种写法被称为内联样式 <!DOCTYPE html> <html>     <head>        <m

css学习笔记day02 -爱代码爱编程

CSS三大特性 层叠性 作用:是浏览器处理冲突的一个能力。如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 。 继承性 作用:子元素可以继承父元素的样式。 特殊性: 并不是所