韩国设计app网站有哪些,哪里需要人做钓鱼网站,深圳购物网站建设价格,盐城快速建设网站找哪家文章目录 盒子模型内容-宽度和高度内边距-padding边框-border圆角-border-radius 外边距-margin上下margin的传递上下margin的折叠块级元素的水平居中行内级元素(包括inline-block元素)的水平居中 外轮廓-outline盒子阴影-box-shadow文字阴影-text-shadow行内非替换元素的特殊性… 文章目录 盒子模型内容-宽度和高度内边距-padding边框-border圆角-border-radius 外边距-margin上下margin的传递上下margin的折叠块级元素的水平居中行内级元素(包括inline-block元素)的水平居中 外轮廓-outline盒子阴影-box-shadow文字阴影-text-shadow行内非替换元素的特殊性CSS属性-box-sizing 盒子模型 因为盒子有四边所以margin/padding/border都包括top/right/bottom/left四个边
内容-宽度和高度
设置内容是通过宽度和高度设置的: 宽度设置:width 高度设置:height 注意:对于行内级非替换元素来说设置宽高是无效的
另外还可以设置如下属性: min-width:最小宽度无论内容多少宽度都大于或等于min-width max-width:最大宽度无论内容多少宽度都小于或等于max-width 移动端适配时可以设置最大宽度和最小宽度 不常用的两个属性: min-height:最小高度无论内容多少高度都大于或等于min-height max-height:最大高度无论内容多少高度都小于或等于max-height
width不设置时默认为auto交给浏览器来决定块级元素独占父元素的一行行内级元素包裹内容
内边距-padding
padding属性用于设置盒子的内边距通常用于设置边框和内容之间的间距 padding有四个方向:padding-top、padding-right、padding-bottom、padding-left
padding缩写是上右下左
padding并非必须是四个值
边框-border
border用于设置盒子的边框 边框具备宽度width、样式style、颜色color 边框宽度 border-top-width、border-right-width、border-bottom-width、border-left-width border-width是简写属性 边框颜色 border-top-color、border-right-color、border-bottom-color、border-left-color border-color是简写属性 边框样式 border-top-style、border-right-style、border-bottom-style、border-left-style border-style是简写属性
圆角-border-radius
border-radius用于设置盒子的圆角 常见的值 数值:通常用来设置小的圆角 百分比:通常用来设置一定的弧度或圆形
如果一个元素是正方形设置border-radius大于或等于50%时就变成一个圆
.box{width: 100px;height: 100px;border: 5px solid #0f0;border-radius:50%
}border-radius事实上是一个缩写属性 将border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius简写为一个属性
外边距-margin
margin属性用于设置盒子的外边距通常用于元素和元素之间的间距 margin包括四个方向:margin-top、margin-right、margin-bottom、margin-left
htmlheadstyle.box {width: 300px;height: 300px;background-color: #f00;padding-left: 30px;box-sizing: border-box;}.container {width: 100px;height: 100px;background-color: #0f0;}/style/headbodydiv classboxdiv classcontainer/div/div/body/html
htmlheadstyle.box {width: 300px;height: 300px;background-color: #f00;overflow: auto;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 30px;margin-top: 30px;}/style/headbodydiv classboxdiv classcontainer/div/div/body/html
上下margin的传递
margin-top传递 如果块级元素的顶部线和父元素的顶部线重叠那么这个块级元素的margin-top值会传递给父元素 margin-bottom传递 如果块级元素的底部线和父元素的底部线重叠并且父元素的高度是auto那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题 给父元素设置padding-top\padding-bottom 给父元素设置border 触发BFC:设置overflow为auto
建议 margin一般用来设置兄弟元素之间的间距 padding一般用来设置父子元素之间的间距
上下margin的折叠
垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin这种现象叫做collapse(折叠) 水平方向上的margin(margin-left、margin-right)永远不会collapse 折叠后最终值的计算规则 两个值进行比较取较大的值 如何防止:只设置其中一个元素的margin
两个兄弟块级元素之间上下margin的折叠 父子块级元素之间margin的折叠
块级元素的水平居中
block box width width padding border margin
margin: 0 auto;
行内级元素(包括inline-block元素)的水平居中
在父元素中设置text-align:center
外轮廓-outline
a {outline: none;
}
/*
a:focus {outline: none;
}
*/outline表示元素的外轮廓 不占用空间 默认显示在border的外面 outline相关属性 outline-width:外轮廓的宽度 outline-style:取值跟border的样式一样比如solid、dotted等 outline-color:外轮廓的颜色 outline:outline-width、outline-style、outline-color的简写属性
应用: 去除a元素、input元素的focus轮廓效果
盒子阴影-box-shadow
box-shadow属性可以设置一个或者多个阴影 每个阴影用shadow表示 多个阴影之间用逗号,隔开从前到后叠加
shadow的格式 none .|. shadow# shadow inset? length{2,4}. color?
第1个length:offset-x水平方向的偏移正数往右偏移 第2个length:offset-y垂直方向的偏移正数往下偏移 第3个length:blur-radius模糊半径 第4个length:spread-radius延伸半径 color:阴影的颜色如果没有设置就跟随color属性的颜色 inset:外框阴影变成内框阴影 测试网站: https://html-css-js.com/css/generator/box-shadow
文字阴影-text-shadow
text-shadow: 5px 5px 5px orange,10px 10px 5px blue,15px 15px 5px green;shadow的常见格式 none .|. shadow-t# shadow-t [ length{2,3} color? ] 相当于box-shadow它没有spread-radius的值 测试网站: https://html-css-js.com/css/generator/text-shadow
行内非替换元素的特殊性
以下属性对行内级非替换元素不起作用 width、height、margin-top、margin-botton
以下属性对行内级非替换元素的效果比较特殊 padding-top、padding-bottom、上下方向的border
htmlheadstyle.content {background-color: #f00;color: white;/*内容: width/height压根不生效*/width: 300px;height: 300px;/*内边距: padding*//*特殊: 上下会被撑起来但是不占据空间*/padding: 50px;/*边框: border*//*特殊: 上下会被撑起来但是不占据空间*/border: 50px solid orange;/*外边距:margin*//*特殊: 上下的margin是不生效的*/margin: 50px;}/style/headbodyspan classcontentspan元素/spanaaadivbbb/div/body/html
背景色有设置到border下面前景色会在border没有设置颜色的情况下显示出color颜色
CSS属性-box-sizing
box-sizing用来设置盒子模型中的宽高的行为 content-box padding、border都布置在width、height外边
border-box padding、border都布置在width、height里边
