一训堆、標(biāo)準(zhǔn)流和display屬性
1.標(biāo)準(zhǔn)流：瀏覽器對默認(rèn)的布局方式就是標(biāo)準(zhǔn)流
2.標(biāo)準(zhǔn)流布局原則：
塊級：
- a.塊級標(biāo)簽一個占一行(不管標(biāo)簽的寬度是否是父標(biāo)簽寬度)
- b.默認(rèn)寬度是瀏覽器寬度凸椿，默認(rèn)高度是內(nèi)容的高度
- c.直接設(shè)置寬高有效
行內(nèi)塊標(biāo)簽：
- a.多個行內(nèi)塊可以在一行顯示
- b.默認(rèn)寬高都是內(nèi)容的寬高
- c.直接設(shè)置寬高有效
行內(nèi)標(biāo)簽：
- a.多個行內(nèi)塊可以在一行顯示
- b.默認(rèn)寬高都是內(nèi)容的寬高
- c.直接設(shè)置寬高無效
3.display屬性：轉(zhuǎn)換標(biāo)簽的性質(zhì)
- block：塊級
- inline：行內(nèi)
- inline-block：行內(nèi)塊
**注意：行內(nèi)塊標(biāo)簽和其他標(biāo)簽之間默認(rèn)有間隙，而這個間隙無法消除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.display屬性*/
#div1{
background-color: salmon;
width: 100px;
height: 100px;
}
#div2{
background-color: seagreen;
width: 100px;
height: 100px;
}
div{
display: inline-block;
}
img{
display: inline;
width: 100px;
height: 100px;
background-color: saddlebrown;
}
a{
display: block;
background-color: slateblue;
width: 200px;
}
</style>
</head>
<body>
<!--默認(rèn)塊級-->
<div id="div1">
aaa
</div>
<div id="div2">
aaa
</div>
<!--默認(rèn)是行內(nèi)-->
<a href="">百度一下</a>
<a href="">百度一下</a>
<!--默認(rèn)是行內(nèi)塊-->
<img src="img/luffy4.jpg"/>
<img src="img/luffy4.jpg"/>
</body>
</html>
二搅裙、浮動
1.怎么浮動：
- a.通過給float屬性賦值為left或者right來讓標(biāo)簽浮動残吩。浮動會讓標(biāo)簽脫流
- b.浮動的目的就是讓豎著顯示的可以橫著來(針對塊)
2.浮動的效果
- a.塊級：一個可以顯示多個缰趋；默認(rèn)的寬度是內(nèi)容的大信跎肌；可以設(shè)置寬度和高度
- b.一行顯示不了的時候才會自動換行
3.注意事項：
- a.如果同一級的標(biāo)簽秘血，后邊的需要浮動味抖，前面的也要浮動，可能會出現(xiàn)顯示的問題
- b.浮動的標(biāo)簽不占池底的位置灰粮，只占水面的位置仔涩；不浮動的既占池底又占水面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="div1" style="background-color: rgba(255,255,0,0.3); width: 50%; height: 100px; float: left;">
</div>
<div id="" style="background-color: slateblue;width: 40%; height: 150px; float: left;">
</div>
<div id="div2">
</div>
</body>
</html>
三、浮動(文字環(huán)繞)
1.文字環(huán)繞效果：
- 被環(huán)繞的標(biāo)簽浮動粘舟，文字對應(yīng)的標(biāo)簽不浮動熔脂。就會自動產(chǎn)生文字環(huán)繞的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/luffy4.jpg" alt="" style="float: left; width: 100px; height: 100px;"/>
<p>來自：http://blog.csdn.net/lethwei/article/details/4334728
因為項目需要, 要更改 TreeView 的 StateImageList 大小, 試了下, 更改綁定的 StateImageList.ImageSize 沒有作用, 顯示大小始終是 16x16
在網(wǎng)上搜了搜, 相關(guān)資料比較少, 終于在 CodeProject 上找到問題原因:
http://www.codeproject.com/KB/tree/customstatetreeview.aspx?display=PrintAll&fid=313614&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=1519145
附文:
Underlying comctl treeview uses a zero image index, indicating no state image is displayed.
Thus comctl state imagelist must have a dummy as first image.
.NET copies the passed StateImageList to a new NET internal imagelist.
The first image is duplicated, serving as dummy and the copy is passed to comctl.
TreeNode.StateImageIndex values passed to comctl are then increased by 1.
This might have been a nice feature, but WinForms Team blundered using a constant 16 x 16 size for the copy.
If you want different size, use code below and add a dummy as first image.</p>
</body>
</html>
四、清除浮動
1.清除浮動：清除浮動不是將標(biāo)簽的浮動給去掉柑肴，而是清除因為浮動而產(chǎn)生的高度塌陷的問題
高度塌陷：父標(biāo)簽不浮動霞揉，子標(biāo)簽浮動，并且不設(shè)置父標(biāo)簽的高度晰骑，就會產(chǎn)生高度塌陷的問題(父標(biāo)簽)
2.方案一：添加空盒子适秩，在高度塌陷的標(biāo)簽(父標(biāo)簽)的最后添加一個空的div,并設(shè)置樣式clear的值為both
方案二：給父標(biāo)簽添加樣式設(shè)置overflow的值為hidden
方案三: 萬能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案二：設(shè)置overflow*/
/*#father{
overflow: hidden;
}*/
/*方案三：*/
#father:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
#father{
zoom: 1;
}
</style>
</head>
<body>
<div style="background-color: salmon; height: 120px;"></div>
<div id="father" style="background-color: seagreen;">
<div id="" style="background-color: skyblue; height: 100px; float: left; width: 20%;">
</div>
<div id="" style="background-color: slateblue; height: 300px; float: right; width: 30%;">
</div>
<div style="background-color: salmon; width: 81%; float: left; height: 200px;"></div>
<!--方案一:添加空盒子-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="background-color: sienna; width: 100%;height: 200px;"></div>
</body>
</html>
五、定位
- CSS中可以通過left,right,bottom,top屬性來設(shè)置標(biāo)簽到上下左右的距離(但是默認(rèn)情況下這些值不是都有效的);
- 想要讓定位屬性有效硕舆，必須通過position屬性來設(shè)置參考對象秽荞。
1.position
- initial: 默認(rèn)值, 沒有相對定位
- absolute: 相對第一個非static/initial父標(biāo)簽進(jìn)行定位
- relative: 相對于自己在標(biāo)準(zhǔn)流中位置來定位。（當(dāng)標(biāo)簽本身不希望去定位抚官，只是想讓自己的子標(biāo)簽可以相對本身來定位的時候使用）
- fixed：相對應(yīng)瀏覽器定位
- sticky:當(dāng)網(wǎng)頁的內(nèi)容不超過一屏(不滾動)的時候扬跋，就按照標(biāo)準(zhǔn)流進(jìn)行定位。超過了就相對瀏覽器定位
2.注意：如果想要設(shè)置right值要保證相對標(biāo)簽的寬度是確定的凌节。如果想要設(shè)置bottom值要保證相對對象的高度是確定的
3.技巧：當(dāng)遇到某個方向定位死活都無效的時候钦听，可以嘗試讓這個標(biāo)簽浮動，然后再定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
right: 100px;
bottom: 20px;
position: absolute;
}
</style>
</head>
<body>
<!--1.absolute-->
<!--<div id="" style="background-color: skyblue; width: 700px; height: 800px;">
<div id="" style="background-color: sandybrown; width: 400px; height: 400px; position: relative;">
<div id="div1" style="background-color: seagreen; width: 100px; height: 100px;">
</div>
</div>
</div>-->
<!--2.relative-->
<!--<div id="" style="background-color: lightskyblue; height: 100px;">
</div>
<div id="" style="background-color: sandybrown; height: 120px; width: 100px; top: 100px; position: relative;">
</div>-->
<!--3.fixed-->
<!--<div id="top" style="background-color: chartreuse; height: 20000px;">
aaaaaaaa
<div id="" style="background-color: hotpink; width: 100px; height: 50px; right: 20px; bottom: 20px; position: fixed;">
<a href="#top">回到頂部</a>
</div>
</div>-->
<!--4.sticky-->
<div id="top" style="background-color: chartreuse; height: 20000px;">
</div>
<div id="" style="background-color: hotpink; width: 100%; height: 50px; bottom: 20px; position: sticky;">
<a href="#top">回到頂部</a>
</div>
</body>
</html>
六倍奢、盒子模型
html中所有可見的標(biāo)簽都是一個盒子模型：包括長和寬決定的內(nèi)容的大小彪见、padding、border娱挨、margin四個部分組成。
其中內(nèi)容捕犬、padding跷坝、border是可見酵镜，margin不可見
1.內(nèi)容：設(shè)置width和height影響的就是內(nèi)容部分的大小。添加子標(biāo)簽柴钻、添加內(nèi)容都是放在內(nèi)容部分的
2.padding：在內(nèi)容的外圍淮韭，可見部分，如果標(biāo)簽有背景顏色贴届，那么這個部分的顏色和內(nèi)容的一致
3.border：邊框靠粪，border是在padding的外圍，如果沒有padding就在內(nèi)容的外圍毫蚓，可見部分占键。可以設(shè)置顏色和大小
4.margin:最外面層
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: skyblue;
/*1.內(nèi)容*/
width: 100px;
height: 100px;
/*2.padding
* padding-方向:寬度
*/
/*padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*同時設(shè)置上右下左的padding值*/
/*padding: 10px 20px 100px 50px;*/
/*同時設(shè)置上下和左右*/
/*padding: 20px 100px;*/
/*同時設(shè)置所有方向的padding都是20px*/
padding: 100px;
/*3.border:寬度 樣式 顏色
* 樣式:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)
*/
/*單獨設(shè)置某一邊的邊框*/
/*border-left: 20px solid red;*/
/*同時設(shè)置四個邊的邊框*/
border: 10px solid red;
/*4.margin：寬度
*
*/
margin-left: 200px;
}
input{
padding-left: 20px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<div id="">
abc卡的哈哈雙方都世紀(jì)東方哈啥
</div>
</body>
</html>
七元潘、其他常見的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.字體相關(guān)的屬性
* 字體顏色:color
* 字體大小:font-size
* 字體名:font-family
* 字體加粗:font-weight(bolder(更粗的)/bold（加粗）/normal（常規(guī)）/100—900)
* 字體傾斜：font-style(italic/oblique/normal)
*/
p{
font-family:"微軟雅黑";
font-weight: 100;
font-style: italic;
}
/*2.對齊方式:text-align
* left:左對齊
* right:右對齊
* center: 水平方向居中
*/
p{
text-align: left;
}
/*3.行高：line-height
* 設(shè)置一行的高度
*/
p{
/*一行內(nèi)容在垂直方向上居中畔乙，可以通過將line-height的值設(shè)置為和height的值一樣*/
line-height: 100px;
}
/*4.文本修飾：text-decoration
* none: 取消修飾
* underline:下劃線
* overline:上劃線
* line-through:刪除線
*/
a,p{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
/*5.首行縮進(jìn)：text-indent
* 注意單位是：em（表示空格）
*/
p{
text-indent: 2em;
}
/*6.字間距：letter-spacing
* 單位可以是：px,em
*/
p{
letter-spacing: 2px;
}
/*7.列表相關(guān)的*/
ul{
/*margin-left: 100px;*/
/*list-style-type: none;*/
list-style-image:url(img/luffy2.png);
list-style-position:inside;
}
/*8.背景圖片
* background:圖片地址 是否平鋪 x方向的坐標(biāo) y方向的坐標(biāo) 背景色
*/
#div{
width: 300px;
height: 200px;
/*background-image: url(img/luffy4.jpg);*/
background: url(img/luffy2.png) no-repeat center 0px yellow;
}
/*9.設(shè)置圓角*/
#div{
/*border-bottom-left-radius: 10px;
border-radius: 30px;*/
border-radius: 10px 100px;
border:3px solid red;
}
</style>
</head>
<body>
<a href="">百度一下</a>
<p style="background-color: burlywood; height: 100px;">我是段落：hello world我是段落：hello world</p>
<ul>
<li>數(shù)學(xué)</li>
<li>語文</li>
</ul>
<div id="div">
<!--<div id="" style="background-color: hotpink; height: 60px; width: 80px; float: right;">
</div>-->
</div>
</body>
</html>
