搜索到
9
篇与
CSS
的结果
-
盒子模型--边框--内边距--外边距 盒子模型： 内容区（content） 内边距（padding） 边框（border） 外边框（margin）border简写属性，通过该属性可以设置边框所有的相关样式，并且没有顺序要求 border: 10px red solid ;内容区(content). 内容由width 和 height 两个属性来设置 width 设置内容区宽度 height 设置内容区的高度边框:(border),边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部 边框的大小会影响整个盒子的大小 要设置边框，需要至少设置三个样式： 边框的宽度：border-width 边框的颜色:border-color 边框的样式：border-style补充： 边框样式值 none：无边框 hidden：隐藏边框 IE不支持 dotted:在MAC平台上IE4+与windows和UNIX平台上IE5.5+为点线。否则为实线（常用） dashed：在MAC平台上IE4+与windows和unix平台上IE5.5+为虚线，否则为实线（常用） solid:实线边框（常用） double：双实线边框，两条单线与其间隔的和等于指定的booder-width值 groove： ridge inset outset 内边距 内边距（padding） -内容区和边框之间的距离是内边距 -一共四个方向 -padding-top -right -bottom -left -内边距的设置会影响到盒子的大小 -背景颜色会延伸到内边距上一个盒子的可见框的大小，由内容区 内边框和边框共同决定盒子大小=内容区()+内边框(padding)+边框(border)外边距 外边距（margin） -外边距不会影响盒子可见框的大小 -但是外边距会影响盒子的位置 -一共有四个方向的1外边距： margin-top -上外边距，设置一个正值，元素会向下移动 margin-right -默认情况下设置margin-right不会产生任何效果 margin-bottom -下外边距，设置一个正值，其下边的元素会向下移动margin-left -左外边距，设置一个正，元素会向右移动 -margin也可以设置负值，如果是负值则元素会向右移动 -元素在页面中是按照自左向右的顺序排列的， 所以默认情况下如果设置左和上边距则会移动元素自身 而设置下和右边距会移动其他元素-margin的简写属性 margin 可以同时设置四个方向的外边距，用法和padding（内边距）一样margin会影响到盒子实际占用空间 -
高度塌陷问题处理 高度塌问题： 在浮动布局中，父元素的高度默认是被子元素撑开的 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离 将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱方法一：利用clearfix类，这个样式可以同时解决高度塌陷和外边距重叠问题 .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; }方法二：不推荐使用了解解决方法 使用BFC属性，BFC是一个隐藏属性 开启BFC该元素会变成独立的布局区域BFC特点： 1.开启 BFC的元素不会被浮动元素所覆盖 2.开启BFC的元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动的子元素开启方法 1.设置浮动元素（不推荐。会使宽度丢失，包含子元素） 2.将元素设置为行内块元素（不推荐） 3.将元素的overflow设置为一个非visible的值常用overflow:hidden开启BFC 以使其可以包含浮动元素
-
float属性（浮动） clear 以及after伪元素 float通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 可选值： none 默认值，不浮动 left 元素向左浮动 right 元素向右浮动 注意： 元素设置浮动后，水平居中的等式便不需要强制成立 元素浮动以后，会完全从文档刘中脱离，不在占用文档流的位置，所以元素下边的还在文档流的元素会自动向上移动浮动的特点 1.浮动元素会脱离文档里，不会占据文档流的位置 2.设置浮动以后元素会向父元素的左侧或右侧移动 3.浮动元素默认不会从父元素中移动 4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6.浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高clear 作用：清除浮动元素对当前元素所产生的影响可选值： left 清除左侧浮动元素对当前元素所产生的影响 right 清除右侧浮动元素对当前元素所产生的影响 both 清除两侧中最大影响的那侧原理：设置清除浮动以后，浏览器会自动为元素添加一个外边框以使其位置不受其他元素的影响after伪元素来让子元素 在悬浮撑开父元素 脱离文档流的特点块元素： 1.块元素不在独占页面的一行 2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开行内元素：行内元素脱离文档流以后会变成块元素，特点和块元素一样脱离文档流以后，不需要再区分块和行内了网页布局：代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页布局</title> <style> header,main,footer{ margin: 0px auto; } header{ width: 1000px; height: 150px; background-color:#b9b9b9; } main{ width: 1000px; height: 400px; background-color: #bfa; margin: 10px auto; } nav,article,aside{ float: left; height: 100%; } nav,aside{ width: 190px; } nav{ background-color: yellow; } article{ width: 600px; margin: 0 10px; background-color: orange; } aside{ background-color: pink; } footer{ width: 1000px; height: 150px; background-color: #b9b9b9; } </style> </head> <body> <header></header> <main> <nav></nav> <article></article> <aside></aside> </main> <footer></footer> </body> </html>clear 练习效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box1{ width: 200px; height: 200px; background-color: pink; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; float: right; } .box3{ width: 200px; height: 200px; background-color: orange; clear: both; } /* 由于box1的浮动，导致box3位置上移 也就是box3受到box1的影响，位置发生了改变 如果不想因为某个元素因为其他元素浮动而受到影响而改变位置 可以通过clear属性来清除浮动元素对当前元素所产生的影响 clear 作用：清除浮动元素对当前元素所产生的影响 可选值： left 清除左侧浮动元素对当前元素所产生的影响 right 清除右侧浮动元素对当前元素所产生的影响 both 清除两侧中最大影响的那侧 原理： 设置清除浮动以后，浏览器会自动为元素添加一个外边框 以使其位置不受其他元素的影响 */ </style> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>after伪元素使用 <style> .box1{ border: 10px red solid; } .box2{ width: 100px; height: 100px; background-color: pink; float: left; } /*利用after伪元素来让子元素在悬浮撑开父元素*/ .box1::after{ content: ''; /*转换成块级*/ display: block; /*清除*/ clear: both; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body>
-
CSS中的选择器 目录：常用选择器1.元素选择器： 作用：根据标签名来选中指定的元素 语法: 标签名{} 例子：p{} h1{} div{}2.id选择器： 作用：根据元素的id属性选中一个元素 语法: #id属性值{} 例子：#box{}3.类选择： 作用：根据元素的class属性值选中一组元素 语法: .class属性值{} 例子：.box{}4.通配选择器 作用：选中页面中的所有元素 语法: *{}关系选择器1.子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素<div><p></p></div> div > p{ }2.后代选择器 作用：选中指定元素内指定的后代元素 语法：祖先 后代 html： <p> <span>我是p元素中的span元素</span><br> <em>我是p元素的第一个em</em><br> <em>我是p元素的第二个em</em><br> <em>我是p元素的第三个em</em><br> <em>我是p元素的第四个em</em><br> </p>css： div span{ color: blue; }3.选择下一个兄弟选择器 语法：前一个 + 下一个 span + em { color: orangered; }4.选择下边所有兄弟语法：前一个 ~ 所有span ~ em{ color:pink }属性选择器[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值得元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名^=属性值] 选择属性值含有谋值的元素伪类选择器伪类：不存在的类，特殊的类 -伪类用来描述一个元素的特殊状态 比如：第一个元素，最后一个元素，鼠标移入的元素... -伪类一盘情况下都是使用 ： 开头的 :first-child 第一个元素 :last-child 最后一个元素 :nth-child() 选中第n个元素 特殊值： n 第n个 n的范围0到正无穷 2n 表示选中偶数位的元素 2n+1 表示选中奇数位的元素 -以上这些伪类都是根据所有的子元素进行排列 first-of-type last-of-type nth-of-type -这几个伪类的功能和上述类似，不同的是他们是在同类元素中进行排列 :not() 否定伪类 -将符合条件的元素从元素器中去除代码演示： <ul> <span>我是span元素</span> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul>css代码 /*ul > li:first-child{ color: blue; } ul > li:last-child{ color: red; } ul > li:nth-child(2){ color: seagreen; }*/ /*ul > li:first-of-type{ color: teal; }*/ ul > li:not(:nth-of-type(3)){ color: tomato; }选择器的权重选择器的权重内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级比较优先级时，需要将所有的选择器得优先级相加计算，最后优先级越高，则越优先显示（分组选择器单独计算）选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器（同类型不会无限叠加）可以在某一个样式的1后边添加 !important ,则此时该样式会获取到最高的优先级，甚至超过内联样式 注意：一般在开发的时候不会使用样式的继承样式继承，我们为一个元素设置的样式同时也会应用到他的后代 -继承是发生在祖先后后代之间的继承的设计是为了我们开发 -利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， -这样只需设置一次即可让所有的元素都具有该样式 -注意：并不是所有的样式都会被继承 -比如说:背景相关的，布局相关的这些样式都不会被继承a元素的伪类css <style> a{ text-decoration: none; } /* :link 用来表示没访问过的链接（正常的链接） */ a:link{ color: red; } /* :visited 用来表示访问过的链接 由于隐私，所以viosited这个伪类只能修改链接的颜色 */ a:visited{ color: orange; } /*其他的（不限制于a元素） :hover 用来表示鼠标移入的状态 */ a:hover{ color: blue; } /* :active 用来表示鼠标点击 */ a:active{ color: chartreuse; } </style>html <a href="http://baidu.com/">访问的链接</a> <br><br> <a href="https://blog.32yunbk.cn/">没有访问过的链接</a>
