ITPub博客

首页 > 应用开发 > XML/XSL > Web前端开发——CSS层叠样式表(3)

Web前端开发——CSS层叠样式表(3)

原创 XML/XSL 作者:20170405 时间:2020-08-11 14:48:54 0 删除 编辑

  CSS三大特性

  层叠性

  相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。

  采用就近原则,哪个样式离结构进就执行哪个样式。

  样式不冲突,不会层叠。

  继承性

  子标签会继承父标签的某些样式

  子元素可以继承父元素的样式

  行高的继承性

  body {

  font-size:12px/1.5

  }

  优先级

  1.继承或者*

  2.元素选择器

  3.类选择器或者伪类选择器

  4.ID选择器

  5.行内样式< /style>

  6.!important

  从小到大 越来越大

  继承的权重性为0

  CSS盒子模型

  组成

  盒子模型有内容,边框(border),内边距(padding),外边距(margin)组成。

  盒子里面的文字和图片等元素是内容区域

  盒子的厚度为边框

  盒子边框(border)

  border-width 边框宽度 px

  border-color 边框颜色

  border-style : 边框风格 soild 实线 dotted 点线 dashed 虚线

  简写属性:

  font:font-width font-style font-style

  font:1px solid pink

  分别指定边框

  border-top:

  border-right:

  border-bottom:

  border-left:

  边框会影响盒子的实际大小

  padding内边距

  边框与内容的距离

  padding-left

  padding-right

  padding-top

  padding-bottom

  简写属性

  padding :10px 代表上下左右各边距为10像素

  padding : 10px 10px 代表上下,左右边距为10像素

  padding : 10px 10px 10px 代表 上,左右,下边距为10像素

  padding : 10px 10px 10px 10px 代表上,右,下,左,边距为10像素

  1234

  盒子的实际大小=内容宽度高度+内边距+外边距

  如果没有给一个盒子指定宽度,则不会撑开盒子。

  外边距

  盒子与盒子之间的距离

  margin-leftmargin-rightmargin-topmargin-bottom``

  简写属性

  margin:10px 代表上下左右各边距为10像素

  margin: 10px 10px 代表上下,左右边距为10像素

  margin: 10px 10px 10px 代表 上,左右,下边距为10像素

  margin: 10px 10px 10px 10px 代表上,右,下,左,边距为10像素

  1234

  块级盒子水平居中  

  具备的条件

  1.必须有高度

  2.左右外边距为auto

  具体写法

  1.margin:auto;

  2.margin:0 auto;

  3.margin-left:auto;

  margin-right:auto;

  文字居中和盒子居中区别

  text-align:center;文字居中

  margin:auto; 盒子居中

  可以让盒子里面的文字,行内元素,行内块居中。

  清除元素默认的内外边距

  *{ margin:0;padding:0 }

  行内元素为照顾兼容性,尽量设置左右内外边距,不要设置上下内外边距,不然不显示效果。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69979119/viewspace-2710796/,如需转载,请注明出处,否则将追究法律责任。

上一篇: html css
下一篇: socket编程
请登录后发表评论 登录
全部评论

注册时间:2020-07-14

  • 博文量
    61
  • 访问量
    27054