CSS

最新推荐文章于 2024-07-03 17:59:27 发布
最新推荐文章于 2024-07-03 17:59:27 发布
阅读量111 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhblmd/article/details/109245641
版权
本文介绍了CSS中的emmet语法，用于快速生成HTML结构和CSS属性。详细讲解了组合选择器，包括并集选择器和交集选择器的用法。接着探讨了文档流的概念，分析了块级元素、行内元素和行内块元素的特点，以及它们在显示模式转换中的行为。还讨论了块级元素的特殊处理，如文本换行、溢出处理、外边距合并和外边距塌陷的问题及其解决方案。
摘要由CSDN通过智能技术生成

CSS

emmet语法

快速生成HTML结构

在这里插入图片描述

快速生成css属性

在这里插入图片描述
生成的css属性单位：默认为 px，可以直接指定其他单位，如： lh26em

组合选择器

作用：
可以选择某标签包含的所有后代标签

并集选择器

作用：
可以让多个选择器共享一套样式

交集选择器

作用：
将至少两个选择器连在一起使用（既要还要）

文档流与元素类型

学习路径

  • 什么是 文档流
  • 元素的显示模式
  • 元素显示模式的转换
  • 块级元素的特殊处理

文档流

文档流：是浏览器在显示（渲染）网页标签时所采用的一套排列规则

  • 块级元素 上下排列：独占一行
  • 行内元
最低0.47元/天 解锁文章
Lou.....
关注
专栏目录
CSS权重
m0_51207602的博客
02-05 4720
CSS权重 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。 当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。 如果两个选择器同时作用到一个元素上，权重高者生效。 权重记忆口诀： 1.从0开始，一个行内样式+1000 2.一个id选择器+100 3.一个属性选择器、class或者伪类+10 4.一个元素选择
宽度不够时，div的内容换行
weixin_42613017的博客
02-16 833
当 div 的宽度不足以容纳其中的内容时，浏览器会自动将内容分行显示，以适应 div 的宽度限制。这个过程被称为“换行”。如果需要控制 div 内容的换行行为，可以使用 CSS 样式属性，例如：word-wrap、white-space 等来进行控制。 ...
CSS——rem
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
Css权重
weixin_55017780的博客
06-07 4581
Css的权重是指样式的优先级，当有多个样式作用于一个元素时，只有权重高的样式对元素起作用，然而当权重相同时，后写的样式会覆盖前面的样式。 在设置Css中我们如何去判断权重呢？ 权重值是可以计算的，我们可以通过样式应用方式的权重值来进行计算。 样式的应用方式的权重值如下： 内联样式，权重值为1000 ID选择器，权重值为100 类、伪类，权重值为10 标签选择器，权重为1 通过举例我们可以更清楚了解权重的作用和意义 ...
css 实现换行
最新发布
qq_33240556的博客
07-03 2184
在CSS中，实现文本内容的换行非常直接。通常情况下，文本会自动根据其容器的宽度换行，这是默认行为。
PostCSS 从入门到精通，看着一篇就够了（1）
随遇而安
04-25 2391
pos它为开发者提供了一种更精细、更灵活的方式来管理 CSS，使 CSS 代码不仅仅是简单的样式描述，而是可以通过编程手段进行动态调整和优化的资源。转换 CSS 代码的工具，它提供了一种强大的方式来处理 CSS，例如自动添加前缀、优化代码、进行样式的转换等。通过本文的介绍，我们了解了 PostCSS 的基本概念，包括插件的概念和作用，以及处理器的工作原理。它允许我们使用更高级的语法和特性来编写 CSS，然后将其转换为普通的 CSS 代码，以便在浏览器中使用。编写的工具，它可以对 CSS 代码进行转换和处理。
CSS 浮动
m0_52861684的博客
08-28 5212
CSS浮动。
CSS Reset & Modern CSS Reset
YF云飞的博客
08-01 1万+
CSS Reset & Modern CSS Reset
CSS居中方式总结
热门推荐
qq_54334713的博客
03-24 2万+
行内元素 1.和其他元素都在同一行 2.高，行高及外边距和内边距部分可以改变 3.宽度只与内容有关 4.行内元素只能容纳文本或者其他行内元素 5.a,img,input,lable,select,sapn,textarea,font 块级元素 1.总是在新行上开始，占据一整行 2.高度，行高以及外边距和内边距都课控制 3.宽度始终与浏览器的宽度一样，与内容无关 4.可以容纳行内元素和其他块级元素 5.div,p,table,form,h1,h2,h3,dl,ol,ul,li 居中方式分为三种： .
css 字体倾斜
zmyalh的博客
11-30 1819
【代码】css 字体倾斜。
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
html 圆角
lhblmd的博客
10-19 5978
圆角 通过border-radius为盒子设置圆角孤度 语法： 设置一个值： border-radius:10px; 设置四个值： border-radius: 左上 右上 右下 左下； 设置两个值： border-radius:左上右上 右下左下； 原理： 圆角的孤度 是圆的半径决定 属性值：数字（100px）或 百分比（50%） 特殊形状 圆形：盒子为正方形情况下，盒子的border-radius 值为 50%； 椭圆: 盒子为长方型情况下,将盒子的 border-radius 值
伪元素与元素定位
lhblmd的博客
10-22 3512
伪元素与元素定位 伪元素 before after selection placeholder 1. before 语法： 元素::before 作用： 1.创建一个伪元素，放到匹配的标签元素前面 2.通过 content 样式属性，来为伪元素添加修饰性的内容 特点： 伪元素默认为 行内元素 content 可以设置图片 content：url(路径)； 伪元素选择器的语法标记是 :: ，但 : 也行(过时语法) 伪元素是浏览器自动创建在目标元素内部 2. after 语法： 元素::afrter
html 过度
lhblmd的博客
10-19 1574
过渡 什么是过渡 好处：为 CSS 样式切换时添加过渡效果，增强网页交互体验 过渡：实际上是为元素样式发生改变时添加一种视觉效果 过渡时长 过渡时长：是指样式从一种状态变成另外一种状态所持续的时长， 以 s（秒）为单位，支持小数 语法： transition-duration: 1s; 过渡延时 过渡延时：是指延迟执行样式的变化，同样以秒为单位 语法： 作用：等 3秒后，再开始过渡效果 简而言之：就是等一会再执行过渡效果 过渡属性 l过渡属性：过渡效果 可以指定针对某个样式属性（默认是针对所有样式属性
html阴影 透明
lhblmd的博客
10-19 1318
阴影 盒子阴影 文字阴影 透明 盒子阴影 通过 box-shadow 为盒子设置阴影效果 语法： box-shadow: 50px 50px 50px #ccc inset; 属性值： 文字阴影 通过 text-shadow 为盒子设置阴影效果 语法： text-shadow: 5px 5px 5px #ccc; 属性值： 透明 opacity l通过 opacity 为盒子设置透明度 语法： div{ opacity:0.3; } 注意： 属性值没有单位 盒子与所有子元素都会被设置为透明效果
css
05-28
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页内容样式和布局的标记语言，它可以控制网页的字体、颜色、背景、布局等外观和风格。 CSS使用选择器来选择要应用样式的元素，然后使用属性来定义这些元素的样式。例如，可以使用以下CSS代码设置所有段落的字体为14像素： ```css p { font-size: 14px; } ``` CSS属性有很多，以下是一些常见的CSS属性及其用法： - `color`：设置文本颜色； - `background-color`：设置元素背景颜色； - `font-size`：设置字体大小； - `font-family`：设置字体类型； - `text-align`：设置文本水平对齐方式； - `padding`：设置元素内边距； - `margin`：设置元素外边距； - `border`：设置元素边框； - `width`：设置元素宽度； - `height`：设置元素高度； - `display`：设置元素显示方式。 以上只是CSS的一部分内容，实际上CSS还有很多属性和技巧可以掌握。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值