Day041 CSS, 盒模型, 浮動

checkbox 多選

submit 表單提交按鈕

button 普通的按鈕

reset 充值按鈕

name  會被封裝到請求體中的key

value  是標籤顯示的內容,會被封裝到請求體中的value

select

textarea

css的三種引入方式

行內樣式它的權重是最高的

<

div 
style 
= 'width:200px;color: 
red;'
>
alex
div>

<

head
>
<
style
>
divstyle
>
head
>

<

head
>
<
link 
rel="stylesheet"
href
="./index.css"
/>
head
>

​ 概念:

​ ​ 屬性:

border  邊框

margin 外邊距

需求: 做乙個302*302的盒子

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
/*有多種方法
*/.box
style
>
head
>
<
body
>
<
div 
class
="box"
>
div>
​body
>
html
>

​ 如果保證盒模型不變,當加padding,就要對盒模型的寬或者高減,保證盒模型的不變

​ 通過padding能調整子內容的位置,對於padding來說,通常描述的是父子之間的距離

width

定義:內容的寬度

height

定義:內容的高度

padding

定義:內邊距 內容到邊框之間的距離

.container

padding-top: 20px;

padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;

定義:盒子的邊框

.box

.sanjiao

定義:外邊距 乙個盒子到另乙個盒子的距離

前提條件是: 標準文件流下

讓標準文件流下的盒子居中

/*讓盒子居中*/

/*margin-right: auto;*/
/*margin-left: auto;*/
margin: 0 auto;

浮動的好處:

​ 浮動實現元素併排

浮動的現象:

浮動帶來的問題

​ 如果父盒子沒有設定高度,子盒子都設定浮動,(脫標了,不在文件上佔位置) 撐不起父盒子的高度

清除浮動

css居中補充

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
.father
.active
.box
style
>
head
>
<
body
>
<
div 
class
="father"
>
<
div 
class
="active"
>
<
div 
class
="box"
>alex
div>
div>
div>
body
>
html
>

絕對定位的盒子的居中

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
.father
.box
/*屬性選擇器
*/input[type='text']
ul li:first-child
ul li:last-child
ul li:nth-child(4)
ul li:nth-child(4n+1)
style
>
head
>
<
body
>
<
div 
class
="father"
>
<
div 
class
="box"
>
div>
div>
<
input 
type
="text"
>
<
input 
type
="password"
>
<
input 
typeof
="submit"
>
<
ul>
<
li>1
li>
<
li>1
li>
<
li>1
li>
<
li>1
li>
<
li>1
li>
<
li>1
li>
ul>
body
>
html
>

CSS盒模型與浮動

box sizing屬性用於改變元素width和height值的具體意義 段落p 標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的 即 換行 任何元素可以由display block宣告為塊級元素。注 通過css的display屬性，是可以改變html文件中元素預設的布局方式的...

css 標準流 盒模型 浮動

一 盒模型 1.1 盒子的區域 乙個盒子的主要屬性5個 width height padding border margin padding 內邊距 border 邊框 margin 外邊框 1.2 認識width height 乙個盒子的真實占有的寬度 左border 左padding width...

CSS盒模型 定位流 浮動流

一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...