第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

寬高不定實(shí)現(xiàn)盒子水平垂直居中

1、利用父元素設(shè)置相對(duì)定位,子元素設(shè)置絕對(duì)定位,那么子元素就是相對(duì)于父元素定位的特性。

2、子元素設(shè)置上和左偏移的值都為50%。

3、然后再用css3屬性translate位移,給上和左都位移-50%距離，就能達(dá)到垂直水平居中的效果。

已知寬高實(shí)現(xiàn)盒子水平垂直居中

1、利用父元素設(shè)置相對(duì)定位,子元素設(shè)置絕對(duì)定位,那么子元素就是相對(duì)于父元素定位的特性。

2、子元素設(shè)置上和左偏移的值都為50%，是元素的左上角在父元素中心點(diǎn)的位置。

3、然后再用margin給上和左都給負(fù)的自身寬高的一半,就能達(dá)到垂直水平居中的效果。

給子元素設(shè)置flex占比

1、給子元素設(shè)置flex屬性,可以設(shè)置子元素相對(duì)于父元素的占比。

2、flex屬性的值只能是正整數(shù),表示占比多少。

3、給子元素設(shè)置了flex之后,其寬度屬性會(huì)失效。

使用justify-content屬性設(shè)置橫軸排列方式

• flex-start：交叉軸的起點(diǎn)對(duì)齊

• flex-end：右對(duì)齊

• center： 居中

• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

• space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
  

彈性盒子

1、設(shè)置display: flex屬性可以把塊級(jí)元素在一排顯示。

2、flex需要添加在父元素上，改變子元素的排列順序。

3、默認(rèn)為從左往右依次排列,且和父元素左邊沒(méi)有間隙。

使用position:relative可以使得相對(duì)其他元定位，但是必須遵守下面規(guī)范：

1、參照定位的元素必須是相對(duì)定位元素的前輩元素

2、參照定位的元素必須加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。

fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。

如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位），它通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。

如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。

常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的內(nèi)聯(lián)元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內(nèi)聯(lián)塊狀元素有：

<img>、<input>

長(zhǎng)度單位：

1. 像素：px

2. em：是font-size的整數(shù)倍

3. 百分比：行高（行間距）為字體的130%
   

text-align:center 居中

text-align:left;? ?居左

text-align:right; 局右

letter-spacing:字母與字母之間的間隔

word-spacing:英文單詞之間的間距

p{text-indent:2em;}

文本設(shè)置2個(gè)空格縮進(jìn)，這可以用于中文文字中的段前兩個(gè)文字的空白

權(quán)值的規(guī)則：

標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。

p{color:red;} /*權(quán)值為1*/

p span{color:green;} /*權(quán)值為1+1=2*/

.warning{color:white;} /*權(quán)值為10*/

p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/

#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/