ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css 继承性和层叠性,字体,文本对齐,缩进,修饰,盒模型,居中,父子盒模型

2019-10-04 15:01:36  阅读:211  来源: 互联网

标签:居中 盒子 模型 边框 内边 对齐 文本 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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有