css基础2

块级元素行内元素

• 块级(block-level);行内(内联、inline-level)
• 块级可以包含块级和行内，行内只能包含文本和行内
• 块级占据一整行空间，行内占据自身宽度空间
• 宽高设置、内外边距的差异

block-level

div  h1  h2  h3  h4  h5  h6  p  hr(线)
form  ul  dl  ol  pre  table
li  dd  dt  tr  td  th 

inline-level

em  strong  span  a  br  img
button  input  label  select  textarea
code  script 

宽高

只对块级元素设置生效，对行内元素设置无效

p, span{
  width: 200px;
  height: 200px;
}

边框

border-width、border-color、border-style

.box{
  border-width: 1px;
  border-color: red;
  border-style: solid;  /* dotted dash */
}
.box2{
  border: 1px dotted #ccc;
}

/*边框三角形*/
.box{            
  height: 1px;
  width: red;
  border-top: solid 20px red;
  border-left: solid 20px green;
  border-right: solid 20px orange;
  border-bottom: solid 20px blue;
}

 /*   沙漏     */
.box{            
  height: 0;
  width: 0px;
  border-top: solid 20px red;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  border-bottom: solid 20px blue;
}

/*  圆角  */
.circle{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 10px 8px 6px 2px;
  /* border-radius: 50px; */
  /* border-radius: 50%; */
}

边距

padding

• padding代表内边距，有四个方向的值，可以合写，值可以是数值也可以是百分百（相对于父容器、不是自身）
• padding-top
• padding-right
• padding-bottom
• padding-left

padding: 20px; /* padding: 20px 20px 20px 20px; */
padding: 10px 20px; /* padding: 10px 20px 10px 20px; */
padding: 10px 20px 30px; /* padding: 10px 20px 30px 20px; */

margin

• margin代表外边距，有四个方向的值，可以和写，值也可以是百分比（相对于父容器、不是自身）。还可以是负值
• 外边距合并问题
• margin-top
• margin-right
• margin-bottom
• padding-left

margin: 20px; /* margin: 20px 20px 20px 20px; */
margin: 10px 20px; /* margin: 10px 20px 10px 20px; */
margin: 10px 20px 30px; /* margin: 10px 20px 30px 20px; */

块元素的居中

margin: 0 auto;
对于块级元素 设置margin: 0 auto 可达到剧中目的

.box{
  /* margin: 0 auto; 实质上是下面两个起作用*/
  margin-left: auto;
  margin-right: auto;
}

去除元素默认 margin padding

* {
  margin: 0;
  padding: 0;
}

***对于行内元素的上下margin、padding不生效，上下padding只是呈现效果变了会影响背景色和边框，本身所占的大小并没有发生变化