CSS学习笔记——属性书写顺序

最新推荐文章于 2024-04-10 11:59:41 发布
最新推荐文章于 2024-04-10 11:59:41 发布
阅读量147 收藏
点赞数
分类专栏： WEB前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsjackson13/article/details/112008837
版权

建议遵循的专业的书写顺序：

1.布局定位属性

display position float clear visibility overflow（建议display第一个写，毕竟关系到模式）

2.自身属性

width height margin padding border background

3.文本属性

color font text-decoration text-align vertical-align white-space break-word

4.其他属性（CSS3）

content cursor border-radius box-shadow text-shadow background:linear-gradient...

雨田大大
关注
专栏目录
CSS学习笔记14——CSS属性书写顺序
lxy95512的博客
01-17 381
建议遵循以下顺序: 1.布局定位属性: display / position/ float / clear / visibility/ overflow (建议display第一个写，毕竟关系到模式)。 2.自身属性: width/ height / margin/ padding / border / background。 3.文本属性: color/ font / text-decoration/ text-align/ vertical-align/ white-space / break-w
CSS学习笔记——Day One
2301_79729136的博客
11-21 224
CSS学习笔记（选择器、文本属性、新闻页面案例）
CSS学习笔记——背景属性
利用Transition过渡完成手风琴菜单
07-04 463
本文是作者本人学习过程中的笔记总结，如若文中有不正确或需要补充的地方，欢迎在评论区中留言。 1. 背景颜色 2. 背景图片 3. 背景重复 4. 背景定位 5. 背景附着 6. 背景缩放 7. 多背景 8. 综合写法 9. 注意事项 10. 背景图替换插入图 11. 文字隐藏方法 12. 精灵图 ...
CSS学习笔记 —— 浮动
利用Transition过渡完成手风琴菜单
07-03 664
本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。 1. 定义 2. 性质 3. 问题
CSS学习笔记——Emmet语法，复合选择器
画船听雨眠
03-20 207
并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。3.如果有父子级关系的标签，可以用>比如。
CSS学习笔记——定位
利用Transition过渡完成手风琴菜单
07-04 185
本文是作者本人学习过程中的笔记总结，如若文中有不正确或需要补充的地方，欢迎在评论区中留言。 1. 定位介绍 1.1. 定位属性 作用：设置定位的元素，需要根据某个参考元素发生位置的偏移 属性值：relative --> 相对定位； absolute --> 绝对定位； fixed --> 固定定位 1.2. 偏移量属性 定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置 水平方向：left, right 垂直方向：top, bottom 属性值：常用 px 为单位
CSS学习笔记8——背景属性
lxy95512的博客
01-12 211
通过CSS背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 背景颜色 background-color属性定义了元素的背景颜色。 background-color:颜色值; 一般情况下元素背景颜色默认值是transparent (透明) ，我们也可以手动指定背景颜色为透明色。 背景图片 background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于
CSS学习笔记3——字体属性
lxy95512的博客
01-11 318
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 字体系列 CSS使用font-family属性定义文本的字体系列。 body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; } 注意： 1、各种字体之间必须使用英文状态下的逗号隔开。 2、一般情况下，如果有空格隔开的多个单词组成的字体加引号。 3、尽量使用系统默认自带字体，保证...
CSS学习笔记 —— 盒模型
利用Transition过渡完成手风琴菜单
06-08 195
本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。 1. width
学习标准——笔记
10-31
### 学习标准——笔记 #### 一、CSS布局技巧与注意事项 1. **对象具有浮动属性时的宽度处理：** - 当一个HTML元素（如`<div>`）设置了`float`属性后，该元素将脱离文档流，并且不再占据原来的位置空间。因此，在...
CSS学习笔记05——CSS布局·定位+装饰
visionchyw的博客
06-16 304
CSS布局·定位+装饰
CSS学习笔记13——浮动
lxy95512的博客
01-14 173
CSS提供了三种传统布局方式(简单说就是舒如何进行排列顺序: 1、普通流(标准流) 2、浮动 3、定位 注意:实际开发中, 一个页面基本都包含了这三种布局方式。 标准流 标准流：就是标签按照规定好默认方式排列。 1.块级元素会独占一行，从上向下顺序排列。 常用元素:div、 hr、p、h1~h6、ul、 ol、 dl、 form、table 2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素: sp...
CSS3学习笔记——多栏布局、盒布局、弹性盒布局
ass_ace
08-23 4294
使用float或position属性进行页面布局的缺点 两个块区域是各自独立的，如果在其中一个区域加入一些内容，将会使两个元素的底部不对齐，导致页面多出一块空白区域。 如下例所示，第一个DIV中有图像元素，篇幅比较大： 多栏布局   使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容底部对齐；   多栏布局的相关属性：   1）column-count：将...
CSS属性书写顺序（重点）以及CSS定位
最新发布
J3259392566的博客
04-10 1218
CSS属性书写的顺序以及CSS定位（position）定位的组成、静态定位、相对定位、绝对定位、粘性定位、固定定位以及了解~~~堆叠顺序z-index、定位的拓展（都是干货）
如何打开一个现有的VUE项目
热门推荐
雨田大大的专栏
03-27 1万+
如何打开一个现有的VUE项目。最近为了研究，下载了一个VUE项目，但是一直打不开。经过研究（一番折腾），现把经验记录一下。
解决 Syntax Error: Error: PostCSS received undefined instead of CSS string 的问题
雨田大大的专栏
03-29 5035
1.卸载当前版本 npm uninstall node-sass npm uninstall sass-loader 2.安装指定版本 npm install node-sass@4.14.1 npm install sass-loader@8.0.0 3.运行 npm run server 如果出现node_modules/node-sass/vendor 模块找不到 直接在node_modules/node-sass下新建一个vender文件夹，然后再执行 npm rebuild.
VUE调用打印机打印页面
雨田大大的专栏
03-28 4522
一个比较简单的方法 1.安装插件 npm install vue-print-nb --save 2.在main.js文件中引入 import Print from 'vue-print-nb' 　　Vue.use(Print); //注册 3.在div里写上id，这个div里所有的内容就都可以打印了，例如： 　　　　<div id="printTest" > 　　　　　　<p>要打的字</p> 　　　　</div> 　　<el-but
VS CODE中格式对齐的小技巧
雨田大大的专栏
12-29 3790
1.使用快捷键对齐 shift+alt+F 2.在按下快捷保存（ctrl+S）后自动对齐的设置方式 进入菜单有两种方式 （1）通过 “文件”-》“首选”-》“设置” （2）通过界面左下方的齿轮图标后点“设置” 搜索emmet.include，之后在emmet中点击“在settings.json中编辑” 在原来的代码后面加个数字的逗号，然后再加上两句话： "editor.formatOnType":true, "editor.formatOnSave":tru...
php学习笔记——综合实例（学生信息管理系统）
雨田大大的专栏
05-27 1364
一、建立数据库 二、连接数据库公共文件 conn.php 三、学生信息列表页 list.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学生信息管理中心</title> </head> <body> <div> <h2>学生信息管理中心</h2> <a href="
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值