如果有老师教，那么他会告诉你说，HTML是骨架，是用来构成网页结构的；CSS是样式表，是用来定义网页的样式的，就是相当于用来给房子做装修用的；然后JS呢，它是管交互的，就相当于一个大楼里的开关啊或是电梯之类的...切页面就是先有HTML，然后写CSS，然后再写JS这样的。 这个学习顺序是完全没有问题的，它也符合人类认识理解一个新事物的基本认知顺序，由浅入深，由易到难，量积累到一定程度了会有质的飞跃。...因为这类网页没有一个确定的结构，它随着不同权限的人，操作不同的数据，处于不同的状态，而在这期间，它的DOM结构是不断变化的。...昨天的文章里我说过，你在京东买东西，你点击的是input,但实际上通过input标签，你触发了ajax事件，调用了updata方法，修改了你的payCart对象，即购物车对象里的val值，这是什么？...这在网页视图上反映的就是你的购物车里，多了一件商品。这个操作实质上操作的是数据，是你的payCart数据。 让我们先从需求出发，先把业务所用到的数据都整理，归纳出来。
值 描述 none 定义的标准文本 underline 文本下方画的一条线 overline 文本上方画的一条线 line 穿过文本的一条线 继承父元素的text-decoration的值 常用的应用场景...，当边框是正方形时，设置半径是边框的一半可以得到一个圆形，如果边框是长方形则可以得到一个椭圆。...1.8float（浮动） 在css中任何元素都可以浮动，浮动的特点： 浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响 会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
，第二个值代表垂直方向 Background-attachment scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示 fixed：背景图的位置是基于整个浏览器body的范围进行显示...，如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。...垂直方向外边距合并（取最大值） 两个盒子垂直布局，一个设置上外边距，一个设置下外边距，取的设置较大的值，而不是相加。...---- 五、浮动 1、文档流（标准流） 元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。...4、清除浮动 清除浮动不是不用浮动，清除浮动产生的问题。 问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。
浮动和清除浮动：了解浮动属性和清除浮动的方法，以实现元素的自适应布局和多列布局。...下图中, 元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景, 内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素；而元素背景通常应用于由内容和内边距...等同于 inline grid */ display: inline-table; /* 类似于 HTML 的 元素，但实际是一个内联盒，而不是一个块级盒子。...由于CSS外边距合并的规则，这两个外边距会合并为一个外边距，所以实际上这两个div>元素之间的垂直距离是20px，而不是40px。...会变变出边框 所有边框属性在一个声明之中 div> outline-轮廓 描述: 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围
定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
此外，还有一个与边框类似的属性，即轮廓线(outline)，这个属性会在边框盒子外围画出一条线，但这个线不会影响盒子的布局，即不会影响盒子的宽高。...如下，我们在模拟的边框上加一个虚线的轮廓，其只是在外围包括了一层轮廓，并不影响布局。 ? 轮廓不影响布局 最后，内边距、边框和外边距都不是必需的，因此它们的默认值都是 0。...但对于我们样式编写者来说，更加倾向的是元素盒子的大小可以通过width和height指定，在新增边框和内边距的时候，内容区自动计算，而不是每次都要手动的调整，才能保证元素盒子的整体宽高不变。...大家可能会困惑，为啥会有外边距折叠，就正常的显示不就好了。这也是有实际参考的。...3.2 可见格式化模型 3.2.1 包含块与定位 常规情况下，包含块是元素的最近块级父元素，但这并不是一定的。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。 ---- ID和类选择器的区别 相同点：可以应用于任何元素 不同点： 1、ID选择器只能在文档中使用一次。...---- 盒模型–边框（一） 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。...因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。...任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。...2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。 ID选择器和类选择器的区别： ID选择器只能在文档中使用一次。 可以使用类选择器词列表方法为一个元素同时设置多个样式。
我是一段居中的文字 我是一段居右的文字 我是一段居左的文字 </body...li.last { border-right: none; /*取消最列表右边的边框线*/ } li > a { border-right...后面增加以下三项，即可完成边框线的固定*/ content: ""; /*构建一个虚假的元素*/ display: block; /*设置为块的属性*/...*/ } div>img { max-width: 100%; /*设置图片的大小自适应图框，按照实际来调节*/ }..._buddy">我是为了配合c5而存在的div> div class="c5">我是c5，始终相对于浏览器的相对位置div>
4.4、边框（border） 边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。...border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用象素（px）。 4.5、宽度和高度（width，height） ?...一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界；高度同理。...1div{ 2 width:200px; 3 height:30px; 4} 4.6、填充（padding） 元素内容与边框之间是可以设置距离的，称之为“填充”。填充有很多种写法。...5.2、浮动模型（Float） 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
下面我们来进行实际操作： 而不是单独写三个分离的属性，因为浏览器会推算相关值。...注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的元素就不是项目。Grid布局只对项目生效。...属性：下边框所在的水平网格线 .item-1 { grid-column-start: 2; grid-column-end: 4; } 上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线...上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
如图 3.1.25 3.4.7 设置边框——frameborder 由前面的几个实例可以看出，在默认情况下，框架窗口的四周有一条边框线，通过 frameborder 参数可以调整边框线的显示情况...如果取值为 0，那么边框线将会被隐藏；如 果取值为 1，边框线将会显示。在 frameset 中设置将会对整个框架有效，在 frame 中设置则 只对当前这个框架有效。...，因此无法显示此页面！...如图3.1.35 3.4.18 浮动框架 动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套子窗口，也就是整个页面 并不是框架页面，但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。...div> div> （2）content是整个布局页面；top是水平线以上部分；left是图书封面；right是图书简介。
Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。...:50px; c. border 边框 这个有些时候还是挺有用的，设置一个标签四周的边框，一般可以设置线粗细，样式，颜色等 border-width : 线的粗细 border-style dotted...效果取决于边框的颜色值 border-color: 边框的颜色 一个非常有意思的点是，边框支持分别设置上下左右四个线的形式，如只设置一个左右有颜色的 div> 边框的颜色值 outline-width 从实际体验来讲，这个和border的效果差不多 9....往往是用于图像，但它在布局时一样非常有用。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。 总结：>作用于元素的第一代后代，空格作用于元素的所有后代。...8-5 盒模型--边框（一） 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。...如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是 border 代码的缩写形式，可以分开写：...因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。...任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。 什么是层模型？
div { width: 200px; height: 150px; } 2.2 margin 和 padding margin 属性用于设置元素的外边距，而 padding 属性用于设置元素的内边距...属性用于设置元素的边框，包括边框的宽度、样式和颜色。...其他常见属性 5.1 float float 属性用于设置元素的浮动方式，可以是左浮动、右浮动或不浮动。...div { opacity: 0.5; /* 半透明 */ } 结论 这些是CSS中的一些常见属性，它们用于控制网页元素的外观和布局。通过深入理解这些属性的用法，你可以更好地设计和样式化你的网页。...记住，CSS是一门强大的语言，它允许你实现各种各样的效果，所以不断练习和探索是非常重要的。希望这篇文章对你在学习CSS时有所帮助！
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin...1.4.1 盒子设置 设置宽高 width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度 */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度...，不是盒子整体高度 */ 设置边框 border-top:10px solid red; /* 设置顶部边 */ border-bottom:10px solid red; /* 设置低部边 */...solid(实线) 、dashed(虚线)、dotted(点线)；red 表示线的颜色。...(一般是高度不设置)，父元素内整体浮动的子元素无法撑开父元素，父元素需要清除浮动
创建BFC1、float的值不是none2、position的值不是static 就是relative3、display的值是inline-block、flex、inline-flex4、overflow...相对定位的用途:相对定位用来微调元素的位置，相对定位的元素，可以当做绝对定位的参考盒子。边框与圆角边框border属性的三要素:线宽度、线型、线颜色。...border-color:red; /**线颜色*/}线型值意义solid实线 dashed虚线 dotted点状线 边框三要素可以拆分为小属性：线型值意义solid实线 dashed虚线...dotted点状线 border-left:none;属性即可去掉左边框，以此类推。...如果样式表是外链的，那么要书写从css出发到图片的路径，而不是从html出发。.
推荐使用此方式。...定义标准的文本 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 inherit 继承父元素的text-decoration...4.3 float 在CSS中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止； 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。...允许浮动元素出现在两侧 inherit 规定应该从父元素继承clear属性的值 注意：clear属性只会对自身起作用，而不会影响其他元素。
span2:我是红色 div>div1:我是黑色div> div class="redF three"...> span2:我是红色 div id="d1">div1:我是黑色div> div id="d2">div2:我是红色div> 的边框是不显示的 边框属性 border 用于设置边框的样式 格式：宽度 样式 颜色 例如：1px solid red 样式：solid实现，none无边，double双线 width 用于设置标签的宽度...height 用于设置边框的高度 background-color 用于设置背景的颜色 布局 浮动文档流 格式 选择器{float:属性值} none:元素不浮动 left:元素向左浮动 right...） inline:将元素显示为行内元素（行内元素的默认属性值） inline-block:行内块标签 none:此元素将被隐藏，不显示，也不占用页面空间 字体 font-size用于设置字体大小，取值是像素
CSS 什么是CSS CSS全称Cascading Style Sheet层叠样式表 用来调整美化网页（对不同的模块去调整宽度高度背景字体大小等） HTML用来填入基本网页整体内容和结构划分，而CSS...--不是div标签所以未被修饰 --> 属性选择器：选出所有带有此属性的标签（[属性名]） <!...可再自定义宽高 常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div 内联元素：不会独占一行，不能设置宽高还有边距这些，范围只是仅仅包裹内容。...display:inline 块转内 display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够 浮动：通过设置浮动可以到达同行的效果不用去转内联块...，定位的元素的父元素是用相对定位就行。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
