內(nèi)容概述
一. 盒子模型
理解盒子模型：4個基本屬性
content
padding
border
margin
屏幕快照 2020-02-12 下午4.25.13.png
content 內(nèi)容相關(guān)屬性
- width
- min-width
- max-width
- height
- min-height
- max-height
padding 內(nèi)邊距相關(guān)屬性
- padding: 上右下左
- padding：是padding-top爱谁、padding-right封断、padding-bottom歧杏、padding-left的簡寫屬性
- 按照順時針方向設(shè)值：top馋劈、right组题、bottom、left
- 如果缺少left, 那么left就使用right的值
- 如果缺少bottom, 那么bottom就使用top的
margin 外邊距相關(guān)屬性
- margin: 上右下左
- margin：是margin-top粗悯、margin-right蒂萎、margin-bottom、margin-left的簡寫屬性
- 上下margin的傳遞
- margin-top傳遞（常見）
如果塊級元素的頂部線和父元素的頂部線重疊偿渡，那么這個塊級元素的margin-top值會傳遞給父元素 - margin-bottom傳遞（少見臼寄，一般都是設(shè)置top）
如果塊級元素的底部線和父元素的底部線重疊，并且父元素的高度是auto溜宽，那么這個塊級元素的margin-bottom值會傳遞給父元素 - 如何防止出現(xiàn)傳遞問題吉拳？
- 給父元素設(shè)置padding-top\padding-bottom
- 給父元素設(shè)置border
- 觸發(fā)BFC:
- 1 設(shè)置overflow（設(shè)置為auto、hidden等都可适揉，只要不是visible就可）
- 2 浮動也可以觸發(fā)
- 建議
margin一般是用來設(shè)置兄弟元素之間的間距
padding一般是用來設(shè)置父子元素之間的間距
- margin-top傳遞（常見）
- 上下margin的折疊
- 垂直方向上相鄰的2個margin（margin-top留攒、margin-bottom）有可能會合并為1個margin煤惩，這種現(xiàn)象叫做collapse（折疊）
- 水平方向上的margin（margin-left、margin-right）永遠(yuǎn)不會collapse
- 折疊后最終值的計(jì)算規(guī)則：兩個值進(jìn)行比較炼邀，取較大的值
- 如何防止margin collapse魄揉？
- 只設(shè)置其中一個元素的margin
- 塊級元素折疊問題看似有點(diǎn)莫名其妙，實(shí)際上還是有實(shí)用之處的
- 比如連續(xù)段落之間的margin拭宁，恰好需要這種折疊效果
border
-
border: border-width border-style border-color
- 邊框顏色洛退、寬度、樣式的編寫順序任意
- border-top杰标、border-right兵怯、border-bottom、border-left
- border：統(tǒng)一設(shè)置4個方向的邊框
-
邊框的形狀可能是
- 矩形腔剂、梯形媒区、三角形等形狀
div { display: inline-block; } .box1 { width: 100px; height: 100px; background-color: #ffeaa7; border-top: 10px solid #fab1a0; } .box2 { width: 100px; height: 100px; background-color: #ffeaa7; border-top: 10px solid #fab1a0; border-left: 10px solid #6a89cc; } .box3 { border-top: 110px solid #fab1a0; border-left: 110px solid #6a89cc; width: 0; height: 0; }
屏幕快照 2020-02-12 下午3.40.28.png
- 屏幕快照 2020-02-12 下午3.43.26.png
-
border實(shí)現(xiàn)其他效果
-
比如三角效果
.box1 { border-top: 100px solid #fab1a0; border-right: 100px solid #7bc4df; border-bottom: 100px solid #ffeaa7; border-left: 100px solid #8da5d8; } .box2 { border-top: 100px solid #fab1a0; border-left: 100px solid transparent; background-color: transparent; transform: rotate(45deg); } .box3 { border-top: 100px solid #fab1a0; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid transparent; }屏幕快照 2020-02-12 下午4.07.34.png
-
- 第三種寫法是我自己想的，不需要像第二種那樣旋轉(zhuǎn)掸犬，方便理解
CSS屬性 - border-*-*-radius
-
border-*-*-radius- border---radius定義的是四分之一橢圓的半徑
- 第1個值是水平半徑
- 第2個值是垂直半徑（如果不設(shè)置袜漩，就跟隨水平半徑的值）
- 還可以設(shè)置百分比
- 參考的是border-box的寬度
- border---radius定義的是四分之一橢圓的半徑
- border-radius
- border-radius大于或等于50%時，就會變成一個圓
行內(nèi)級非替換元素的注意點(diǎn)
- 以下屬性對行內(nèi)級非替換元素不起作用
- width湾碎、height宙攻、margin-top、margin-bottom
- 以下屬性對行內(nèi)級非替換元素的效果比較特殊
- padding-top介褥、padding-bottom粘优、上下方向的border
二、盒模型的其他屬性
CSS屬性 - outline
- outline表示元素的外輪廓
- 不占用空間
- 默認(rèn)顯示在border的外面
- outline相關(guān)屬性有
- outline-width
- outline-style：取值跟border的樣式一樣呻顽，比如solid、dotted等
- outline-color
- outline：outline-width丹墨、outline-style廊遍、outline-color的簡寫屬性，跟border用法類似
- 應(yīng)用實(shí)例
- 調(diào)試技巧：查看網(wǎng)站的布局
-
outline: 1px solid red !important贩挣，outline不占空間喉前，不會影響原布局，border會占據(jù)空間王财，導(dǎo)致格式變化
-
- 去除 a/input/textarea 元素的focus輪廓效果
outline: none
- 調(diào)試技巧：查看網(wǎng)站的布局
CSS屬性 - box-shadow
box-shadow屬性可以設(shè)置一個或者多個陰影
每個陰影用<shadow>表示
多個陰影之間用逗號,隔開卵迂，從前到后疊加-
<shadow>的常見格式如下-
<shadow> = inset? && <length>{2,4} && <color>?，&&表示可以不按順序 - 第1個
<length>：水平方向的偏移绒净，正數(shù)往右偏移 - 第2個
<length>：垂直方向的偏移见咒，正數(shù)往下偏移 - 第3個
<length>：模糊半徑（blur radius） - 第4個
<length>：延伸距離 -
<color>：陰影的顏色，如果沒有設(shè)置挂疆，就跟隨color屬性的顏色 - inset：外框陰影變成內(nèi)框陰影（很少用到）
-
-
練習(xí)：
- 實(shí)現(xiàn)以下效果：左右都要有陰影
屏幕快照 2020-02-12 下午9.30.24.png
.shadow {
margin: 50px auto;
width: 300px;
height: 400px;
/* box-shadow: -10px 10px 5px, 10px 10px 10px; */
box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .2);
}
方法一：（注釋起來的）設(shè)置兩個陰影
方法二：
box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .2);-
CSS屬性 - text-shadow
- 用法類似于box-shadow改览，用于給文字添加陰影效果
- text-shadow同樣適用于::first-line下翎、::first-letter
CSS屬性 - box-sizing
-
box-sizing用來設(shè)置盒子模型中寬高的行為
- content-box：padding、border都布置在width宝当、height外邊（W3C標(biāo)準(zhǔn)盒子模型）
- 元素的實(shí)際占用寬度 = border + padding + width
- 元素的實(shí)際占用高度 = border + padding + height
- border-box：padding视事、border都布置在width、height里邊（IE8以下瀏覽器）
- 元素的實(shí)際占用寬度 = width
- 元素的實(shí)際占用高度 = height
屏幕快照 2020-02-12 下午8.38.03.png - content-box：padding、border都布置在width宝当、height外邊（W3C標(biāo)準(zhǔn)盒子模型）
元素的水平居中顯示
- 在一些需求中庆揩，需要元素在父元素中水平居中顯示（父元素一般都是塊級元素俐东、inline-block）
- 行內(nèi)級元素、inline-block元素
水平居中：在父元素中設(shè)置text-align: center - 塊級元素
水平居中：margin: 0 auto
- 行內(nèi)級元素、inline-block元素
實(shí)現(xiàn)元素靠左靠右
- margin-left和margin-right的初始值為0订晌，此時靠左
- 將margin-left改為auto即為靠右
垂直居中
實(shí)現(xiàn)垂直居中父元素height必須是auto
https://www.w3.org/Style/Examples/007/center.zh_CN.html
可以用絕對定位實(shí)現(xiàn)
作業(yè)
- 課堂代碼
- 作業(yè)一 - 商品列表 - 頁碼列表
- 作業(yè)二: 考拉的導(dǎo)航右側(cè)
1577180164959.png
- 筆記補(bǔ)充完善
提問
表單:
- input中的name和value的作用
- name會在瀏覽器 - 提交給服務(wù)器作為key
- value普通的input, button/radio/checkbox/option
- form元素中的常見屬性
- action: 服務(wù)器地址(URL)
- method: 請求方式(get/post)
- target: 打開方式
- enctype
- accept-charset
元素的分類:
- 是否可以在同一行顯示
- 塊級元素(block level)
- 行內(nèi)級元素(inline-level)
- 是否會被瀏覽器替換掉
- 替換元素(replaced elements)
- 非替換元素(non-replaced elements)
- display屬性常見的值:
- block
- inline
- none
- inline-block特點(diǎn)
- 可以和其他內(nèi)容在同一行顯示
- 設(shè)置寬度和高度
img/input/iframe -> 替換元素 ->沒有說過是inline-block
- 可以在同一行顯示
- 可以設(shè)置寬度和高度
inline-block
- 可以在同一行顯示
- 可以設(shè)置寬度和高度
- 沒有設(shè)置寬度和高度, 寬度和高度由內(nèi)容決定
min: 最小
max: 最大
block -> block - block
inline -> inline - inline
inline-block -> inline - block
觸發(fā)BFC
- BFC: block format context
- 結(jié)界
如何觸發(fā)BFC:
- 浮動可以觸發(fā)
- 設(shè)置一個元素的overflow為非visible
- hidden
- auto
- scroll
content
- 寬度和高度
padding
margin
border
