網站首頁 編程語言 正文
CSS樣式中選擇器+盒子模型+定位+浮動
一、選擇器
選擇器，選擇你所需要修飾的HTML元素
1.通配符選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 通配符選擇器：選擇html文檔中所有的標簽
*/
*{
color: red;
}
</style>
</head>
<body>
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
<p>用真心待她人</p>
<p>做美麗的自己</p>
</body>
</html>
2.標簽選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 標簽選擇器
*/
p{
color: red;
}
/*
* class選擇器
* 注意：以.開頭
*/
.myclass{
color: green;
}
/*
* id選擇器
* 注意：
* 1.以#開頭
* 2.潛規則：id是唯一的
*/
#myid{
color: blue;
}
</style>
</head>
<body>
<h1 class="myclass">一級標簽</h1>
<h2>二級標簽</h2>
<h3 class="myclass">三級標簽</h3>
<h4>四級標簽</h4>
<h5 class="myclass">五級標簽</h5>
<h6 id="myid">六級標簽</h6>
<p>用真心待她人</p>
<p>做美麗的自己</p>
</body>
</html>
3.基本選擇器的優先級別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 基本選擇器的優先級別：ID選擇器>CLASS選擇器>標簽選擇器
*/
p{
color: red;
}
.myclass{
color: green;
}
#myid{
color: blue;
}
</style>
</head>
<body>
<p id="myid" class="myclass">用良心做教育</p>
</body>
</html>
4.群組選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 群組選擇器
*/
h1,h3,h5,p{
color: red;
}
</style>
</head>
<body>
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
<p>用真心待她人</p>
<p>做美麗的自己</p>
</body>
</html>
5.派生選擇器/上下文關系選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 派生選擇器/上下文關系選擇器
*
* 后臺選擇器
* ul a{
color: red;
}
子代選擇器
li>a{
color: red;
}
相鄰兄弟選擇器
注意：效果作用于后者
a+a{
color: red;
}
*/
</style>
</head>
<body>
<ul>
<li>
<a href="#">超鏈接1</a>
</li>
<li>
<a href="#">超鏈接2</a>
</li>
<li>
<a href="#">超鏈接3</a>
</li>
</ul>
<ul>
<li>
<a href="#">超鏈接4</a>
</li>
<li>
<a href="#">超鏈接5</a>
</li>
<li>
<a href="#">超鏈接6</a>
</li>
<li>
<a href="#">超鏈接7</a>
</li>
</ul>
<a href="#">超鏈接8</a>
<a href="#">超鏈接9</a>
<a href="#">超鏈接10</a>
<a href="#">超鏈接11</a>
<a href="#">超鏈接12</a>
</body>
</html>
6.屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 屬性選擇器 --- 單個屬性
* input[placeholder]{
color: red;
}
屬性選擇器 --- 單個屬性+值
input[type=password]{
color: red;
}
屬性選擇器 --- 多個屬性
input[type][placeholder]{
color: red;
}
屬性選擇器 --- 多個屬性+值
input[type=password][name=repassword]{
color: red;
}
*/
</style>
</head>
<body>
<form action="服務器地址" method="post">
賬號：<input name="username" type="text" placeholder="請輸入賬號"/><br />
密碼：<input name="password" type="password" placeholder="請輸入密碼"/><br />
確認密碼：<input name="repassword" type="password" placeholder="請輸入確認密碼"/><br />
性別：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
愛好：
<input type="checkbox" name="hobbys" value="football"/>足球
<input type="checkbox" name="hobbys" value="basketball"/>籃球
<input type="checkbox" name="hobbys" value="shop"/>購物
<br />
籍貫：
<select name="province">
<option value="sc">四川</option>
<option value="hn" selected="selected">湖南</option>
<option value="hb">湖北</option>
</select>省
<select name="city">
<option value="cs">長沙</option>
<option value="yy">岳陽</option>
<option value="xy" selected="selected">襄陽</option>
<option value="ld">婁底</option>
<option value="yz">永州</option>
</select>市
<br />
<input type="submit" value="注冊" />
</form>
</body>
</html>
7.樣式的優先級別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
樣式的優先級別：行內樣式 > 內部樣式和外部樣式
注意：內部樣式和外部樣式看加載順序
-->
<!--內部樣式-->
<style type="text/css">
p{color: red;}
</style>
<!--外部樣式-->
<link rel="stylesheet" href="../css/new_file.css" />
</head>
<body>
<!--行內樣式-->
<p style="color: blue;">用良心做教育</p>
</body>
</html>
8.錨偽類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {color: #66CCFF} /* 未訪問的鏈接 */
a:visited {color: #CC0000} /* 已訪問的鏈接 */
a:hover {color: #33FFFF} /* 鼠標移動到鏈接上 */
a:active {color: #9900FF} /* 選定的鏈接 */
</style>
</head>
<body>
<a >新浪微博</a>
</body>
</html>
9.常用屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-family: "微軟雅黑";/*字體*/
font-size: 30px;/*大小*/
/*
* ---- normal標準樣式
---- italic斜體
---- oblique傾斜
---- inherit從父類繼承的字體樣式
*/
font-style: oblique;/*風格*/
/*
----normal標準樣式
----bold粗體
----bolder更粗
----lighter更細
*/
font-weight: bolder;/*字體加粗*/
letter-spacing: 20px;/*字符間隔*/
text-decoration: underline;/*添加劃線*/
text-align: center;/*字體居中*/
background-color: red;/*背景*/
color: white;
/*
* 邊框
屬性名稱
border-bottom
solid(實線)
dashed(虛線)
double(雙實線)
*/
border:orange 10px solid;/*邊框：顏色、粗細、實線*/
}
</style>
</head>
<body>
<p>用良心做教育</p>
</body>
</html>
二、盒子模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式
瀏覽器兼容性
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
為了兼容IE老版本，一句話，能用外邊距就用外邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: red 1px solid;
/*padding: 50px;設置上下左右內邊距*/
/*padding-top: 20px;設置頂部內邊距*/
/*padding-bottom: 20px;設置底部內邊距*/
/*padding-left: 20px;設置左邊內邊距*/
/*padding-right: 20px;設置右邊內邊距*/
/*margin: 50px;設置上下左右外邊距*/
margin-top: 20px;/*設置頂部外邊距*/
margin-bottom: 20px;/*設置底部外邊距*/
margin-left: 20px;/*設置左邊外邊距*/
margin-right: 20px;/*設置右邊外邊距*/
/*margin: 0 auto;水平居中*/
}
</style>
</head>
<body>
<div>
<span>元素</span>
</div>
</body>
</html>
三、定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。CSS 定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
1.相對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 50px;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: relative;/*相對定位：保留原來的位置，相對于原來的位置進行位移*/
left: 30px;
top: 30px;
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
2.絕對定位
絕對定位相對于他有position屬性的父級元素進行定位，如果父級元素沒有postion定位，那么就找父級的父級，直到向上找到position定位為止，如果他向上找不到position定位，那么就以最外層的body進行定位。
并且絕對定位不會保留原有的位置空間。
z-index屬性，確定層級大小，用來設定哪一個盒子在上面，越大越在上面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 50px;
position: relative;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: absolute;/*絕對定位：不保留原來的位置，向上去找尋父級標簽，查看父級標簽是否有position屬性，如果有就按照父級標簽位置進行位移，如果沒有就繼續向上找尋，直到body位置*/
left: 30px;
top: 30px;
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
3.固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
position: fixed;/*固定定位*/
top:70%;
left: 90%;
}
</style>
</head>
<body>
<a id="top" href="#new01">?</a>
<a href="#new01">法制</a>
<a href="#new02">國際</a>
<a href="#new03">教育</a>
<a href="#new04">娛樂</a>
<a name="new01"></a><!--錨點-->
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<h1>法制新聞</h1>
<a name="new02"></a><!--錨點-->
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<h1>國際新聞</h1>
<a name="new03"></a><!--錨點-->
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<h1>教育新聞</h1>
<a name="new04"></a><!--錨點-->
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
<h1>娛樂新聞</h1>
</body>
</html>
四、浮動
浮動可以幫助我們更好進行頁面排版，使原本豎著排列的盒子可以橫向排列起來。
副作用：因為浮動會使元素脫離了標準的文檔流，從而導致父級元素無法被撐開。
解決辦法：添加空盒子
在被浮動的元素后面，添加一個空的div，并且設置一個clear類，并付給該div
.clear{clear:both;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
width: 80%;
margin: 0 auto;
padding: 5px;
}
#box01{
border: orange 1px solid;
width: 100%;
height: 150px;
}
#box02{
border: orange 1px solid;
width: 25%;
height: 200px;
float: left;
}
#box03{
border: orange 1px solid;
width: 45%;
height: 200px;
float: left;
}
#box04{
border: orange 1px solid;
width: 25%;
height: 200px;
float: left;
}
.myclear{
clear: both;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div>
<div id="box02"></div>
<div id="box03"></div>
<div id="box04"></div>
<div class="myclear"></div>
</div>
</div>
</body>
</html>
五、擴展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: url(../img/漸變色.jpg) center top repeat-x #EAF4FF;
}
input{
width: 100px;
height: 50px;
color: white;
font-weight: bolder;
background-color: orange;
border-radius: 15px;/*圓角屬性*/
box-shadow: 10px 10px 5px gainsboro;/*添加按鈕陰影 X軸偏移量 Y軸偏移量 陰影模糊半徑*/
text-shadow: 5px 5px 5px black;/*添加文本陰影 X軸偏移量 Y軸偏移量 陰影模糊半徑*/
}
</style>
</head>
<body>
<input type="button" value="普通按鈕" />
</body>
</html>
六、新增語義化標簽
| 標簽 | 描述 |
|---|---|
|
|
頭部標簽 |
| 導航標簽 | |
| 內容標簽 | |
| 塊級標簽 | |
| 側邊欄標簽 | |
| 尾部標簽 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
header,nav,article,aside,footer,section{
background-color: #87A442;
text-align: center;
border: black 1px solid;
border-radius:20px;
margin: 10px;
padding: 10px;
}
header{
height: 120px;
}
nav{
height: 50px;
}
article{
width: 46%;
height: 120px;
float: left;
}
aside{
width: 46%;
height: 120px;
float: right;yu
}
footer{
clear: both;
height: 120px;
}
section{
height: 70px;
}
</style>
<header>頭部標簽 - header</header>
<nav>導航標簽 - nav</nav>
<div>
<article>內容標簽 - article
<section>塊級標簽 - section</section>
</article>
<aside>側邊欄標簽 - aside</aside>
</div>
<footer>尾部標簽 - footer</footer>
</body>
</html>
原文鏈接：https://blog.csdn.net/GL280599ZL/article/details/127837958
- 上一篇：解決“您的連接不是私密鏈接”的問題
- 下一篇：正則表達式手冊以備平時自己看
相關推薦
- 2022-11-29 React?Hooks獲取數據實現方法介紹_React
- 2022-09-16 Python利用LyScript插件實現批量打開關閉進程_python
- 2022-06-17 Ruby序列化和持久化存儲(Marshal、Pstore)操作方法詳解_Golang
- 2022-09-13 Android四大組件之Service服務詳細講解_Android
- 2022-06-12 Unity?使用tiledmap解析地圖的詳細過程_C#教程
- 2022-06-18 android實現可拖動的浮動view_Android
- 2024-03-28 mac vscode 命令行啟動命令安裝 別名設置方法
- 2022-06-01 React函數式組件與類組件的不同你知道嗎_React
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速