Common questions about getting started with CSS

Written before: This article briefly introduces the three major characteristics of CSS: cascading, inheritance, and priority. As well as margin, padding, floating, and positioning several knowledge points. It is limited to the level and will not be discussed in depth. It is only used as a learning summary.

1. Three characteristics

1) Cascading: If the styles conflict with the same label and the same weight, the later styles will overwrite the previous ones.

2) Inheritance: When setting the style for the parent element, the child element will be affected by the style of the parent element if it has no style by default. Note that width and height cannot be inherited.

Inheritable attributes:
◇Text color can be inherited color
◇Text-related attributes can be inherited
◆Line-height (line-height) can be inherited
◆text-align

Special circumstances:

a Tags are not affected by the color of the parent element by default

It is common that setting the color a tag for li when making nav does not work because it is affected by the browser's default style color: -webkit-link.

h1-h6 The default unit is em. The specific size requires product operation

3) Priority:

Tag Selector<Class Selector Selector < Inline Styles

2, Margin features:

1) Merge vertical margins (take the larger one)

2)Vertical margin collapse?

Solution:

Set a border to the parent element.
Set overflow:hidden for the parent element (trigger bfc)

3, Padding value particularity

In block-level elements, if the default sub-element does not have a width set, setting the padding value for the current sub-element will not affect the width of the current sub-box. (The "inherited" box padding value will not be affected)

4,floating

Why use float?

It started as a picture text wrapping effect design and is now mostly used in layout and navigation production

When to clear floats?
1. The parent container has no height set
2. All child elements of the parent container are set to float

How to clean up floats? (Here are the 4 common ones)
1. clear: both;
2. Set overflow: hidden; (the parent element is not positioned)
3. Use pseudo elements

.clearfix 
:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

4,display: table;

.clearfix:before,
.clearfix:after{
clear: both;
display: table;
/*表格模式*/
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

　　

定位：

1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对 （absolute） ：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同 元素后来居上
3）z-index 值越大 当前的元素层级越高
4）父元素的z-index值越大 当前的元素层级越高简单

绝对定位如何居中？

◆通过设置left:50% ; 父元素宽度的一半
◆设置margin-left: -元素自己宽度一半；

双飞翼布局

目的：加载文档时先加载中间区域，再加载左右两边

特点：两侧固定，中间自适应

	<div class="container">
		<div class="columns mainbox">
			<div class="inner">
				我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡
				机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个
				会计课件发卡机看见看见我看见个会计课件发卡机看见看见
			</div>

		</div>
		<div class="columns leftbox"></div>
		<div class="columns rightbox"></div>
	</div>

　　

<span style="color: #008080"> 1</span> <span style="color: #800000"><style>
</span><span style="color: #008080"> 2</span> <span style="color: #800000">        body </span>{
<span style="color: #008080"> 3</span> <span style="color: #ff0000">            min-width</span>:<span style="color: #0000ff"> 1000px</span>;
<span style="color: #008080"> 4</span>         }
<span style="color: #008080"> 5</span>         
<span style="color: #008080"> 6</span> <span style="color: #800000">        .columns </span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">            float</span>:<span style="color: #0000ff"> left</span>;
<span style="color: #008080"> 9</span>         }
<span style="color: #008080">10</span>         
<span style="color: #008080">11</span> <span style="color: #800000">        .container </span>{
<span style="color: #008080">12</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">            border</span>:<span style="color: #0000ff"> 1px solid red</span>;
<span style="color: #008080">14</span>         }
<span style="color: #008080">15</span>         
<span style="color: #008080">16</span> <span style="color: #800000">        .mainbox </span>{
<span style="color: #008080">17</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 100%</span>;
<span style="color: #008080">18</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> yellow</span>;
<span style="color: #008080">19</span>         }
<span style="color: #008080">20</span>         
<span style="color: #008080">21</span> <span style="color: #800000">        .inner </span>{
<span style="color: #008080">22</span> <span style="color: #ff0000">            margin</span>:<span style="color: #0000ff"> 0 300px 0 250px</span>;
<span style="color: #008080">23</span> <span style="color: #ff0000">            word-break</span>:<span style="color: #0000ff"> break-all</span>;
<span style="color: #008080">24</span>         }
<span style="color: #008080">25</span>         
<span style="color: #008080">26</span> <span style="color: #800000">        .leftbox </span>{
<span style="color: #008080">27</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">28</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> red</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -100%</span>;
<span style="color: #008080">30</span>         }
<span style="color: #008080">31</span>         
<span style="color: #008080">32</span> <span style="color: #800000">        .rightbox </span>{
<span style="color: #008080">33</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 300px</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> blue</span>;
<span style="color: #008080">35</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -300px</span>;
<span style="color: #008080">36</span>         }
<span style="color: #008080">37</span> <span style="color: #800000">    </style></span>