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

text-overflow:

????????定義：

????????????????用來說明文字溢出時用什么方式顯示

????????方式：

????????????? ? 1、clip：表示剪切

????????????????2、ellipsis：表示顯示省略標(biāo)記

white-space:

????????? 定義：

??????????????????如何處理元素內(nèi)部的空白

????????? 屬性：

????????????????????nowrap：不換行

????????????????????normal：默認屬性，超出則換行

需要配合white-space:nowrap；overflow:hidden 一起使用來達到溢出顯示省略號的效果

線性漸變：

????? ? 語法：

????????????????linear-gradient(漸變方向，起點顏色，重點顏色)

????????參數(shù)：

????????????????角度????????????????英文?????????????????????????作用

????????????????0deg????????????????to top????????????????????從下向上

????????????????90deg????????? ????to right????? ????????????從左向右

????????????????180deg????????????to?bottom????? ?????????從上向下

????????????????270deg????????????to left????????????????? ????從右向左

???????????????????????????????????? ????to top left????????? ?????右上角到左上角

?????????????????????????????????????????to top right?????????????左下角到右上角

????????限制：

????????????????用于設(shè)置背景圖片，單獨使用無效果

????????示例：

?????????????????background-image: linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet);

RGB:

????????是一種色彩標(biāo)準(zhǔn)，是由紅（R）、綠（G）、藍（B）的變化及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎(chǔ)上增加了控制alpha透明度的參數(shù)

語法：

????????color：rgba(R,G,B,A)

????????以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分?jǐn)?shù)值的取值范圍為：0.0% - 100%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有游覽器都支持使用百分?jǐn)?shù)值。A為透明度參數(shù)，取值在0~1之間，不可為負值。

示例：

????????background-color:rgba(100,120,60,0.5)

border-image：

????定義：

????????????為邊框設(shè)置好看的背景圖片

????參數(shù)：

????????????第一個參數(shù)：url(圖片路徑)?

????????????第二個參數(shù)（切換圖片的寬度，單位為px）：左上 右上 右下 左下 也可設(shè)置一個值

????????????第三個參數(shù)（圖片延伸方式）：

????????????????????? ??????????1.round 平鋪

????????????????????????????????2.repeat 重復(fù)

????????????????????????????????3.stretch 拉伸

????????????

陰影模糊半徑與陰影擴展半徑的區(qū)別

????????陰影模糊半徑：此參數(shù)可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

????????陰影擴展半徑：此參數(shù)可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮??；

box-shadow:

????定義：

????????????X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展辦展半徑] [陰影顏色] [投影方式] 如果多個陰影用逗號隔開

????參數(shù)：

????????????X軸偏移量：必需，水平陰影的位置。允許負值

????????????Y軸偏移量：必需。垂直陰影的位置。允許負值

????????????陰影模糊半徑：可選。模糊距離

????????????陰影擴展辦展半徑：可選。陰影的尺寸

????????????陰影顏色：可選。陰影的顏色。省略默認為黑色

????????????投影方式：可選。（設(shè)置inset時為內(nèi)部陰影方式，如果省略為外陰影方式）

border-radius：

????定義：

????????????向元素添加圓角邊框

????使用方法：

????????????順時針設(shè)置：左上角、右上角、右下角、左下角

????單位：最好用px，因為兼容性最好

什么是CSS3？

其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。

支持媒體特性的設(shè)備，正常調(diào)用樣式，此時就當(dāng)only不存在；表示不支持媒體特性但又支持媒體類型的設(shè)備，這樣就會不讀樣式，

background-image: linear-gradient(to left,#0ff,#ff0)? 漸變色

word-wrap :normal? 連續(xù)文本換行

break-word 邊界換行

text-overflow :clip 剪切? ?ellipsis 省略標(biāo)記

Responsive設(shè)計——不同設(shè)備的分辨率設(shè)置

下面我們一起來看看CSS3 Meida Queries在標(biāo)準(zhǔn)設(shè)備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創(chuàng)建一個名為“responsive.css”文件，并在相應(yīng)的條件中寫上你的樣式，讓他適合你的設(shè)計需求：

1.1024px顯屏

@media screen and (max-width : 1024px) { ? ? ? ? ? ? ? ? ? ? /* 樣式寫在這里 */ ? ? ? ? ? } ? ?

2.800px顯屏

@media screen and (max-width : 800px) { ? ? ? ? ? ? ? /* 樣式寫在這里 */ ? ? ? ? ? } ? ?

3.640px顯屏

@media screen and (max-width : 640px) { ? ? ? ? ? ? ? /* 樣式寫在這*/ ? ? ? ? ? ? } ? ?

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) { ? ? ? ? ? ? ? /* 樣式寫在這 */ ? ? ? ? ? ? } ? ?

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) { ? ? ? ? ?/* 樣式寫在這 */ ? ? ? ? ? ? } ? ?

6.iPhone?和?Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) { ? ? ? ? ? ? ? /* 樣式寫在這 */ ? ? ? ? ? ? } ? ?

現(xiàn)在有關(guān)于這方面的運用也是相當(dāng)?shù)某墒欤瑃witter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：

@media (max-width: 480px) { ... } ?????????????

@media (max-width: 768px) { ... } ?????????????

@media (min-width: 768px) and (max-width: 980px) { ... } ? ? ?

?@media (min-width: 1200px) { .. }

自由縮放屬性resize

為了增強用戶體驗，CSS3增加了很多新的屬性，其中resize就是一個重要的屬性，它允許用戶通過拖動的方式來修改元素的尺寸來改變元素的大小。到目前為止，可以使用overflow屬性的任何容器元素。

在此之前，Web設(shè)計師為了要實現(xiàn)這樣具有拖動效果的UI，使用大量的腳本代碼才能實現(xiàn)，這樣費時費力，效率極低。

resize屬性主要是用來改變元素尺寸大小的，其主要目的是增強用戶體驗。但使用方法卻是極其的簡單，先從其語法入手。

resize: none | both | horizontal | vertical | inherit

取值說明：

屬性值

? ?

取值說明

? ?

none

? ?

用戶不能拖動元素修改尺寸大小。

? ?

both

? ?

用戶可以拖動元素，同時修改元素的寬度和高度

? ?

horizontal

? ?

用戶可以拖動元素，僅可以修改元素的寬度，但不能修改元素的高度。

? ?

vertical

? ?

用戶可以拖動元素，僅可以修改元素的高度，但不能修改元素的寬度。

? ?

inherit

? ?

繼承父元素的resize屬性值。

? ?

例如：通過resize屬性，讓文本域可以沿水平方向拖大。代碼為：

textarea { ? -webkit-resize: horizontal; ? -moz-resize: horizontal; ? -o-resize: horizontal; ? -ms-resize: horizontal; ? resize: horizontal; }

CSS3 多列布局——Columns

語法：

columns：<column-width> || <column-count>

多列布局columns屬性參數(shù)主要就兩個屬性參數(shù)：列寬和列數(shù)。

參數(shù)

? ?

參數(shù)說明

? ?

<column-width>

? ?

主要用來定義多列中每列的寬度

? ?

<column-count>

? ?

主要用來定義多列中的列數(shù)

? ?

舉例：要顯示2欄顯示，每欄寬度為200px，代碼為：

品牌? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?前綴

Chrome? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-webkit- ? ?

Firefox? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-moz- ? ?

IE、Edge? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -ms- ? ?

歐朋? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-o- ? ?

CSS3 布局樣式相關(guān)

多列布局——columns

columns：<column-width>主要用來定義多列中每列的寬度 || <column-count>主要用來定義多列中的列數(shù)

多列布局columns屬性參數(shù)主要就兩個屬性參數(shù)：列寬和列數(shù)

column-width:auto||<length>

? ? ? auto屬性值：設(shè)置為auto或沒有顯示的設(shè)置值時，元素多列的列寬將由其他屬性來決定，比如前面的示例額就是由列數(shù)column-cout來? ? ? ? 決定。

? ? ? <length>屬性值：只能為正值，其主要由數(shù)值和長度單位組成

column-cout:auto||<integer>

? ? ? ?auto:默認值，表示元素只有一列，其主要依靠瀏覽器計算自動設(shè)置

? ? ? <integer>:此值為正整數(shù)，主要用來定義元素的列數(shù)，取值為大于0的整數(shù)，負值無效

column-gap:normal||<length>設(shè)置列間距

? ? ? normal:默認值，1em（如果你的字號是px，其默認值為你的font-size值）

? ? ? <length>:不能為負值，可以使用px，em

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>用來定義列與列之間的邊框?qū)挾取⑦吙驑邮胶瓦吙蝾伾?。類似常用的border屬性（column-rule不會占用任何空間位置）

? ? ? column-rule-width:默認值medium，不能使用負值類似border-width，用來定義列邊框的寬度（可以使用關(guān)鍵字，medium、thick? ? ? ? 和thin）

? ? ? column-rule-style：默認值none。類似border-style，用來定義邊框樣式，可以使用solid、dotted、dashed等。

? ? ? column-rule-color：類似border-color，用來定義邊框顏色

column-span:none|all用來定義一個分列元素中的子元素能跨列多少

? ? ? none：默認值，表示不跨越任何列

? ? ? all：這個值和none值剛好相反，表示元素跨越所有列，并定位在列的Z軸

盒子模型

box-sizing：content-box|border-box|inherit：能夠事先定義盒模型的尺寸解析方式

content-box：默認值

border-box：重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統(tǒng)的盒模型（IE6以下版本和IE6-7怪異模式），也就是說元素的寬度或高度等于元素內(nèi)容的寬度或高度。從上面盒模型介紹可知，這里的內(nèi)容寬度或高度包含了元素的border、padding、內(nèi)容的寬度或高度（此處的內(nèi)容寬度或高度＝盒子的寬度或高度—邊框—內(nèi)距）

inherit：使元素繼承父元素的盒模型模式

? ?

標(biāo)簽:not([否定])

否定選擇器 例如div:not([id="footer"]){background:orange}

指的是所有div，除了id為footer的，全部設(shè)置背景顏色為background