从CSS盒子模型开始入门前端Day06

已于 2022-04-12 14:40:34 修改
阅读量255 收藏 1
点赞数 2
分类专栏： 复习巩固CSS 文章标签： css 前端
于 2022-04-12 14:40:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46051366/article/details/124065352
版权

目录

1、CSS三大特性

 1.1继承性

 1.2层叠性

 1.3优先性

 1.4权重叠加计算

 1.5Chome调试工具

2、PxCook的基本使用

3、盒子模型

 3.1盒子模型的介绍

  3.1.1盒子的概念

  3.1.2盒子模型

 3.2内容区域的宽度和高度

 3.3边框（border）

  3.3.1连写形式

  3.3.2单方向设置

  3.3.3单个属性

 3.4内边距（padding）

 3.5外边距（margin）

  3.5.1外边距折叠现象–合并现象

  3.5.2外边距折叠现象——塌陷现象

 3.6 Css3盒模型（自动内减)

1、CSS三大特性

        能认识不同选择器的优先级公式，能够进行CSS权重叠加计算，分析并解决CSS冲突问题

 1.1继承性

 1.2层叠性

        注：

                继承性，层叠性在前一天总结

 1.3优先性

        特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低优先级选择器样式

        优先级公式：

                继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important

        注：

                !important写在属性值的后面，分号的前面！

                !important不能提升继承的优先级，只要是继承优先级最低!

                实际开发中不建议使用!important

 1.4权重叠加计算

        场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

        权重叠加计算公式：（每一级之间不存在进位）

        复合选择器中：（0,0,0,0）

                第一级：第一个0为行内样式的个数

                第二级：第二个0为id选择器的个数

                第三级：第三个0为类选择器的个数

                第四级：第四个0为标签选择器的个数

        比较规则：

                先比较第一级数字，如果比较出来了，之后的统统不看

                如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看......

                如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）

        注：

                !important如果不是继承，则权重最高

 1.5Chome调试工具

        查错流程

        查错步骤：

        （1）右击检查

        （2）哪里不会点哪里，在elements找到对应的元素

        （3）看styles中有没有自己设置的选择器，如果没有，一般是选择器写错了

                常见原因1：选择器单词拼错

                常见原因2：选择器结构写错

        （4）如果选择器有，但是样式没有出来，

                看是否有删除线（没生效）

                        常见原因1：样式被注释

                        常见原因2：样式被覆盖

                看是否有小三角形（报错）

                        常见原因1：属性值后面没有分号

                        常见原因2：出现中文标点

                        常见原因3：属性名或者属性值单词拼错

2、PxCook的基本使用

         PxCook（像素大厨），支持PSD文件的文字，颜色，距离自动智能识别

        标注功能包括：支持长度，颜色，区域，文字注释。

                其中比较有特色的是：

                （1）长度标注针对移动端设计，支持px与dp直接的单位转换

                （2）注释的文字字体样式可以自定义

                （3）自带实时放大镜，省却了反复放大的操作。

                （4）长度标注的数字可以自己手动改，设计时可以小小的偷个懒~

                （5）标注的各种颜色可以自定义，灵活性不错。

3、盒子模型

        能够认识盒子模型的组成，能够掌握盒子模型边框、内边距、外边距的设置方法

 3.1盒子模型的介绍

  3.1.1盒子的概念

        （1）页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局

        （2）浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个矩形区域，我们也形象的称之为盒子

  3.1.2盒子模型

        CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

        记忆：可以联想现实中的包装盒

 3.2内容区域的宽度和高度

        作用：利用width和height属性默认设置是盒子内容区域的大小

        属性：width/height

        常见取值：数字+px

 3.3边框（border）

  3.3.1连写形式

        属性名:border

        属性值:单个取值的连写，取值之间以空格隔开，如: border : 10px solid red;

        快捷键:bd + tab键

  3.3.2单方向设置

        场景:只给盒子的某个方向单独设置边框

        属性名: border -方位名词

        属性值:连写的取值

  3.3.3单个属性

        作用:给设置边框粗细、边框样式、边框颜色效果

        单个属性:

作用属性名属性值
边框粗细border-width数字+px
边框样式border-style实线solid、虚线dashed 、点线dotted
边框颜色border-color颜色取值

 3.4内边距（padding）

        属性值：

值说明
auto设置浏览器边距。这样做的结果会依赖于浏览器
length定义一个固定的margin（使用像素，pt，em等）
%定义一个使用百分比的边距

        边距属性：

        padding属性可以当做复合属性使用，表示单独设置某个方向的内边距

                padding最多取4个值

                四值:上，右，下，左

                        padding: 10px 20px 40px 80px;

                三值:上，左右，下

                        padding: 10px 40px 80px;

                两值:上下，左右

                        padding: 10px 80px;

                单值:上下左右

                        padding:10px;

 3.5外边距（margin）

        margin属性可以当做复合属性使用，表示单独设置某个方向的外边距

        属性值与边距属性与内边距类似

  3.5.1外边距折叠现象–合并现象

        场景:垂直布局的块级元素，上下的margin会合并

        结果:最终两者距离为margin的最大值

        解决方法:避免就好

                只给其中一个盒子设置margin即可

  3.5.2外边距折叠现象——塌陷现象

        场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

        结果:导致父元素一起往下移

        解决方法:

        （1）给父元素设置border-top或者padding-top(分隔父子元素的margin-top)

        （2）给父元素设置overflow: hidden

        （3）转换成行内块元素

        （4）设置浮动

 3.6 Css3盒模型（自动内减)

        需求:盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?

                给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?

        解决方法①∶手动内减

                操作:自己计算多余大小，手动在内容中减去

                缺点:项目中计算量太大，很麻烦

        解决方法②∶自动内减

                操作:给盒子设置属性box-sizing : border-box;即可

                优点:浏览器会自动计算多余大小，自动在内容中减去

晋龍
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的...
CSS自减盒子的弊端
wzh1593185的博客
06-30 68
我们一直常用自减盒子模型的优势,其实它也存在很多弊端,如果解决了这些弊端,则我们对它的理解和运用会更加灵活
web前端学习-css盒子模型
qq_54422936的博客
07-18 655
web前端学习-css盒子模型
css3 calc()：css简单的数学运算-加减乘除
热门推荐
飘过的春风
10-12 1万+
css3 calc()：css简单的数学运算–加减乘除 多好的东西啊，不用js，一个css就解决了。 .box{border:1px solid #ddd;width:calc(100% - 100px);background:#9AC8EB;} 3栏等宽布局。 .box{margin-left:20px;width:calc(100%/3 - 20px);}.box:nt
自增和自减（含指针）
一亩三分地
03-08 579
// ConsoleApplication9.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include using namespace std; int _tmain(int argc, _TCHAR* argv[]) { int i=3; int j=i+++i++; int k=3; int m=(k++)+(
自加++，自减--
Sun_xiangyan的博客
03-16 332
int i=3; //i先加1，i的值变成4,把4赋值给j,j的值就是4,可以理解为++i的值为4 j=++i; //把i的原值3赋值给b,b的值为3,i再加1,i的值变成4,可以理解为i++的值为3 b=i++; printf("%d",++i);//输出值为4 printf("%d\n",i++);//输出值为3 ++、--的结合方向是自右至左（右结合性） ...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
深入理解CSS中的盒子模型
09-27
下面小编就为大家带来一篇深入理解CSS中的盒子模型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css设置滚动条样式；滚动条设置透明
i_am_a_div的博客
06-12 258
css设置滚动条样式；滚动条设置透明
css实现多行文本的展开收起
我码玄黄的博客
06-12 1030
本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 373
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
uniapp使用css实现瀑布流
qq_45623072的博客
06-12 765
title:"大佬点的黑桃全家桶，今晚不醉不归，大干下一场，大家一起来!//当属性值为3，表示超出3行隐。title:"哈哈哈，好可爱的小女孩,打不过...",title:"两个月的布偶猫怎有这么小吗?title:"落日好美，你喜欢吗？title:"这样的礼物你喜欢吗?title:"这样的礼物你喜欢吗?author:"不懂的茄子",author:"椰子哦",author:"快乐样",author:"奈奈酱",author:"椰子哦",
CSS中哪些属性可以继承？
tianxianghuiwei的博客
06-12 366
*空自处理方式*/font-size:inherit;/* 字体大小 */font-weight:inherit;/* 鼠标样式 */color:inherit;在某些情况下需要加注释的属性 *//*文本对齐方式 */可以继承的属性 */
html和css创建一个简单的网页
2301_78696436的博客
06-12 672
这两段代码共同创建了一个简洁的网页，展示了一个包含标题、段落和按钮的容器。HTML 文件定义了页面的结构和内容，而 CSS 文件为这些内容添加了样式，使页面更美观和易于阅读。
Tailwind CSS 实战指南：快速构建响应式网页设计
06-12 1028
Tailwind CSS 是由Adam Wathan和Steve Schoger在2017年创建的。它最初是为了解决传统CSS框架在定制性和灵活性方面的局限性。Tailwind CSS的设计理念是提供一个高度可定制的工具集，允许开发者以实用为先的原则构建用户界面，而不是依赖于预定义的组件。
Tailwind CSS 响应式设计实战指南
06-13 955
这篇文章介绍了如何运用Tailwind CSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计工具应用以及服务器端渲染的策略，并提供了性能优化、代码组织、测试调试的最佳实践，最后展望了响应式设计的未来趋势。
开发移动端常见的问题：VW适配问题，基于 postcss 插件 实现项目vw适配
我就知道你会来，我们一起进步吧！
06-12 346
当你开发移动端的时候有一个问题是避免不了的，那就是当屏幕大小无论怎么变化时，内部尺寸也要随之发生改变，也就是适配问题。这里我们讲的是最新的VW适配，也就是用vw作为单位，100vw是整个页面的大小。而在开发的设计图中用的是px，如果我们徒手计算每个设计图中的尺寸显然是不现实的。在脚手架中我们就会用到一个插件postcss，它会自动将px尺寸转化为vw。这里要提一下的是300*300出现了小数是浏览器精度的问题。此时我们简单的写一个盒子，打开浏览器，就能看到。注意这里是根目录，也就是src目录的外面。
CSS概述
最新发布
2302_77125952的博客
06-15 552
CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如， CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。● 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用 于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。● CSS与HTML的关系 HTML是网页内容 CSS定义页面的样式内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
css3盒子模型怎么设置前端
09-19
在前端开发过程中，可以通过CSS3来设置盒子模型。盒子模型是CSS中布局的基础，可以控制元素的尺寸、边距、填充和边框。 首先，可以使用CSS的`width`和`height`属性来设置盒子的宽度和高度。通过指定一个固定的像素值、百分比或者其他单位，可以精确地定义盒子的尺寸。 其次，可以使用`margin`属性来设置盒子的外边距。外边距可以控制盒子与周围元素之间的间距。可以分别设置上、右、下、左四个方向的外边距，也可以直接设置一个值来统一设置四个方向的外边距。 接着，`padding`属性可以用来设置盒子的内边距。内边距指的是盒子内容与盒子边框之间的距离。同样，可以分别设置四个方向的内边距，或者使用一个值来统一设置。 还可以使用`border`属性来设置盒子的边框。可以指定边框的宽度、样式和颜色。边框样式可以是实线、虚线、点线等，颜色可以是具体的颜色值或者预定义的颜色关键字。 除此之外，CSS3还引入了更多的盒子模型属性，比如`box-shadow`可以设置盒子的阴影效果，`border-radius`可以设置盒子的圆角，`background`可以设置盒子的背景样式等。 总结来说，CSS3盒子模型的设置包括宽度和高度的调整、外边距和内边距的控制、边框样式的定义以及一些附加效果的设置。这些属性的灵活使用可以让前端开发者更好地控制和布局网页中的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值