入门CSS总结1

什么是盒模型


在页面里,每一个元素都可以看作是一个盒子,这就是盒模型。


入门CSS总结1_第1张图片
CSS盒模型科普.jpg
  • 一个元素的width默认是content-width。
  • 但是一个盒子的width一般是content-width+padding-width+border-width+margin-width
  • box-sizing:border-box时,一个元素的width则是content+padding+border

在写页面的时候,遇到比较多的问题就是,什么时候使用margin,什么时候使用padding。
margin定义为外边距,即是盒子与盒子的距离。padding为内边距,它是盒子与盒子里的内容的距离。

div.text1{
width:100px;
padding:50px; }
//盒子宽度是父级盒子宽度+50px*2,此时.text1的宽度会溢出父级盒子宽度

div.text2{
width:100%;
margin:50px;}
盒子宽度是父级盒子宽度

当盒子使用margin时,盒子是往内压,使用padding时,是往外推。使用margin最明显的一点是,可以保证元素与元素之间互不干扰。

块级元素与内联元素


1. 块级元素(block)

  • 高度(height):块级元素高度由其内部文档流元素的高度总和决定。

文档流:文档内元素的流动方向

  • 内联元素从左往右流动,若遇到阻碍则换行继续。
  • 块级元素独占一行,从上往下流动。
  • 宽度(width):块级元素宽度默认为100%

块级元素可以设置width和height。但是,一般不建议使用这两个属性,因为一旦使用这两个属性,会出现很多bug!

2. 内联元素(inline)

  • 高度(height):内联元素高度由line-height(字体建议行高)确定。而这个是由字体设计师 确定。
  • 宽度(width):内联元素的宽度由内容决定。
    有一个特点:英文字母无论多长都会在一行,不会换行。可以使用word-break属性。中文:word-break:break-all,英文:word-break:break-word

内联元素不接受设置宽高。还有,内联元素的上下margin和padding都设定无效

  • 什么是line-box?
    入门CSS总结1_第2张图片

    ① 一个内联元素的高度由line-height(行内框高度)决定。而line-height跟文字内容区(font-size)也有一定的距离。
    ②内联元素的文字位置以基线为中心对齐。因此一般内联元素文字没有垂直居中,可以使用vertical-align:center消除这个bug

3. 内联块级元素(inline-block)

inline-block元素既含有block的宽度高度特性又具有inline的同行特性。
在这次练习的一个例子:

  • html代码



  
  JS Bin


 

作品集

  • CSS代码
section .prouduction{
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    border: 1px solid;
    
}
section .prouduction nav{
    display: inline-block;
    margin-top: 10px;
    border: 1px solid;
}
section .prouduction ol{
    margin: 0;//
    -
  1. 结构会有默认的padding和margin样式 padding: 0; list-style: none; } section .prouduction li{ display: inline; vertical-align: top; margin-left: 40px; border: 1px solid; } section .prouduction li:first-child{ margin-left: 0px; border: 1px solid; } section .prouduction .bar{ background: #FAE1E1; border-radius: 2px; height: 5px; margin: 5px 0 } section .prouduction .bar-inner{ height: 100%; background: #E6686A; border-radius: 2px; width: 15%; }

显示效果:


入门CSS总结1_第3张图片

这个例子,利用了文档流的特性,保证了

    的宽度一致,却没有写死width。在这里

你可能感兴趣的:(入门CSS总结1)