标签:居中 盒子 模型 边框 内边 对齐 文本 css 属性
css 继承性:后代元素能继承来自祖先元素的文字的样式,不能继承盒子的样式。
继承税:先看就近原则,如果一样近,看权重,权重一样看书写顺序
css层叠性:同一个元素可以被多个选择器选中,样式会同时加载在标签上,如果属性重复,会出现层叠
重叠谁:选中元素,看权重,权重大的层叠权重小的,权重一样书写在后面的层叠前面。
没选中元素,看继承性。
!important:将某一个属性的权重提升到最大,但是不适合就近原则
font:bold(字体加粗) 字体大小 / 行高 “字号”
font-style:normal 正常
italic 斜体
oblique 斜体
文本对齐:text-align:left、right、center
文本缩进:text-indent:2em----- em:单位是字符,px:像素,百分比是参考父盒子的宽度
文本修饰:text-decoration:none;正常,没有修饰
underline;下划线
line-through;删除线
overline;上划线
所有的文本,默认属性都是 none (除了 a 标签)
盒模型
盒子属性有:宽,高,内边框,边框,外边框
宽高:width,height ;宽高是实际内容所在的地方
内边距:padding:四值法;顺序是,上、右、下、左
三值法;顺序是,上、左右、下
两值法;顺序是,上下、左右
单值法;所有边距都是一样的
常用:如果一个内边距和其他三个内边距不一样,先用单值法设定总体,谁特殊,再用单一属性单独设置
边框:border----盒子范围最外围的区域,是复合属性
线宽:border-left-width
线颜色:border-color
线形状:border-style
属性值分类:solid 实线
dashed 虚线
double 双线条
dotted 点的虚线
groove 边框凹陷效果
ridge 边框凸出效果
inset 内容区域凹陷效果
outset 内容区域凸出效果
外边距: margin-----盒子与盒子之间的距离
一般情况下,不给盒子设置高度,而是用内部的内容撑高元素
目的,为了保证我们的元素在添加或者删除内容的时候,高度可以自适应内容高度而变化。
实际工作中,样式和结构是有前端人员搭建的,实际文字内容由后台人员导入,内容不一定是规定好的数量,需要给留出可以控制的范围。
上面知识一种情况,不一定都不设置高度
设置溢出内容隐藏的属性----------voerflow:hidden
宽度剩余----只设置左边距,右边距为0
margin的塌陷
如果两个盒子相邻,都有垂直外边距,产生合并了后,哪个外边距大就显示哪个
如果是父子盒子,子盒子的外边距不要用margin,要用父盒子的padding撑开,或者强行给父盒子加一个边框
居中
文字居中:text-align:center
垂直方向:
单行文本居中:行高等于盒子高
多行文本垂直居中:高度自适应,内容撑开高度,用内边距单值法撑开我们的空白区域
盒子居中:子盒子在父盒子内部居中显示
水平居中:margin:0,auto
垂直居中:跟上面文本垂直居中类似
父子盒模型
子盒子的整体占位不能超过父盒子的内容区域
如果子盒子不设置宽度,会自动撑满父盒子,宽度是父盒子的100%,如果还设置了边框和内边距,自动向内减少宽度,
不需要手动的去减少width
标签:居中,盒子,模型,边框,内边,对齐,文本,css,属性 来源: https://www.cnblogs.com/really-insist/p/11621184.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。