塊級元素
、 、、、、、
轉化為塊級元素display:block;
特點:(1)每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(2)元素的高度、寬度、行高以及頂和底邊距都可設定。(3)元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。
內聯元素、、、、
display:inline
內聯塊狀元素
display:inline-block
特點:(1)和其他元素都在一行上(2)元素的高度、寬度、行高以及頂和底邊距都可設定。
盒子模型(塊狀元素具有)
邊框: border:2px solid red;
border-width:2px;
border-style:solid;//dashed(虛線),dotted(點線)
border-color:red;
注:可以只為乙個邊框設定樣式,即不同邊框設定不同的樣式
填充和邊界
padding:20px 10px 15px 30px;//上右下左
margin:20px 10px 15px 30px;
CSS 盒子模型(標準盒模型和怪異盒模型)
所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。所有的文件元素 標籤 都會生成乙個矩形框,我們稱為元素框 element ...
CSS盒子模型和元素溢位
盒子模型 1 重要的組成元素 content 內容 padding 內邊距 border 邊框 margin 外邊距 2 margin margin 100px auto 100px 表示的是上下的外邊距 auto表示的左右水平居中 margin 10px,20px,30px,40px 上,右,下,...
CSS盒子模型和層元素
盒子模型針對css中每個元素 padding後加元素格式 四元素 上 右 下 左 三元素 上 左右 下 兩元素 上下 左右 也可以 margin border和padding同樣擁有以上一樣規則。content1 content box width 50px height 50px backgrou...