css边框，盒子模型、浮动、定位
生活随笔
收集整理的這篇文章主要介紹了
css边框，盒子模型、浮动、定位
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
邊框，盒子模型、浮動、定位
一、邊框
border-width : 邊框?qū)挾?br />
border-style : 邊框樣式
1.solid 實線
2.none 無邊框
3.dotted 點狀虛線邊框
4.dashed 矩形虛線邊框
border-color : 邊框顏色
通常情況下這樣寫：
border: 2px solid cornflowerblue;
圓角邊框：
border-radius: 50%;
二、display屬性
用于HTML元素顯示效果
行內(nèi)標(biāo)簽是無法設(shè)置長寬的，只有塊級可以設(shè)置
display:none;可以隱藏某個元素，隱藏的元素不會占用任何空間
visibility:hidden;可以隱藏某個元素，但是隱藏的元素會占用空間，會任然影響布局
display:block; 默認(rèn)占滿整個頁面的寬度，如果設(shè)置了寬度，則會用margin
填充剩下的部分：
display:inline; 按行內(nèi)元素設(shè)置，此時再設(shè)置元素的width,heigth
display:inline-block; 使元素具有 行內(nèi)元素和塊級元素的特點
三、背景案例
background-attachment:fixed;屬性
background-attachment設(shè)置背景圖像是否固定或者隨著頁面的其他部分滾動
屬性值：
fixed:背景圖片不會隨著頁面的滾動而滾動
scroll：背景的圖片隨著頁面的滾動而滾動，這個屬性是默認(rèn)的
local:背景圖片會隨著元素內(nèi)容的滾動而滾動
inherit:指定background-attachment的設(shè)置應(yīng)該從父元素繼承
四、盒子模型
盒子模型：盒模型，框模型
css將頁面匯總所有的元素的都設(shè)置為一個個矩形的盒子。將元素設(shè)置為矩形的盒子后，對頁面的布局就變成了將不同的盒子擺放到不同的位置，每一個盒子，都有以下幾個部分:
內(nèi)容區(qū)(content):所有的元素
邊框(border):設(shè)置邊框
內(nèi)邊距(padding):指的是盒子內(nèi)容和邊框之間的距離
外邊框(margin):指的是盒子和盒子之間的距離
1.邊框（border） ：元素設(shè)置邊框
可以分別設(shè)置四個邊框的寬度：
設(shè)置四個值： 上 右 下 左
設(shè)置三個值： 上 左右 下
設(shè)置兩個值： 上下 左右
設(shè)置一個值： 上下左右
border-xxx-width:可以設(shè)置某一個邊框的寬度
一般這樣寫：border: 2px solid cornflowerblue;
2.內(nèi)邊距（padding）：指的是盒子的內(nèi)容和邊框之間的距離
一共有四個方向：
1.padding-top
2.padding-right
3.padding-left
4.padding-bottom
padding:10px 20px 10px 20px;
設(shè)置的順序也是：上右下左
3.外邊距(margin):決定當(dāng)前盒子和其他盒子的距離(盒子的可見框大小)
外邊距不會影響可見框的大小，而是影響盒子的位置
盒子有四個方向的外邊距：
margin-top:上邊距，也可以設(shè)置負(fù)值
margin-right:右邊距，一般情況下沒有效果
margin-bottom:下外邊距，設(shè)置一個正值，其下面的元素會向下移動，擠別人
margin-left:左外邊距，設(shè)置正值，元素向右移動
margin:10px 20px 10px 20px;
設(shè)置的順序也是：上右下左
也可以設(shè)置：margin:0 auto;
五、浮動
1.浮動
在我們布局的時候用到的一種技術(shù)，能夠方便我們進(jìn)行布局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調(diào)整位置
2.浮動原理
使當(dāng)前元素脫離普通流，相當(dāng)于浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動的邊緣
3.屬性
left ------>> 元素向左浮動
right ------>> 元素向右浮動
none ------>> 默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
inherit ------>> 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。
4.浮動帶來的影響
浮動的元素是脫離正常的文檔流，會造成父標(biāo)簽塌陷
5.解決浮動帶來的影響的解決方法
.clearfix:after{
content:'';
display:block;
clear:both;
}
哪個塌陷了給哪個添加上就好了
六、溢出屬性
overflow:visible 默認(rèn)值，內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外
overflow:hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的
overflow:scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容
overflow:auto 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容,右側(cè)和底部都有滾動條
overflow:inherit 規(guī)定應(yīng)該從父元素繼承overflow屬性的值
overflow（水平和垂直均設(shè)置）
overflow-x（設(shè)置水平方向）
overflow-y（設(shè)置垂直方向）
七、定位
標(biāo)簽在默認(rèn)情況下是無法通過定位的參數(shù)來移動
針對移動有四種方法：
1.static(靜態(tài))：標(biāo)簽?zāi)J(rèn)的狀態(tài)，無法定位移動
2.relative(相對定位)：基于標(biāo)簽原來的位置
3.absolute(絕對定位)：基于某個定位過的父標(biāo)簽做定位
4.fixed(固定定位)：基于瀏覽器固定不變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
height: 100px;
width: 100px;
background-color: cornflowerblue;
position: relative;
left: 100px;
}
.d2 {
height: 100px;
width: 100px;
background-color: crimson;
position: relative;
/*left: 100px;*/
}
.d3 {
height: 100px;
width: 100px;
background-color: goldenrod;
position: absolute;
left: 300px;
}
.d1 {
height: 100px;
width: 100px;
background-color: darkblue;
position: fixed;
right: 100px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">
<div class="d3">
</div>
</div>
<div class="d4"></div>
</body>
</html>
八、z-index
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。要讓z-index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。
z-index無論設(shè)置多高都不起作用情況，這種情況發(fā)生的條件有三個：
1、父標(biāo)簽 position屬性為relative；
2、問題標(biāo)簽無position屬性（不包括static）；
3、問題標(biāo)簽含有浮動(float)屬性。
eg:z-index層級不起作用，浮動會讓z-index失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover{
background-color: rgba(127,127,127,0.6);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 999;
}
.modal {
height: 200px;
width: 500px;
background-color: white;
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -350px;
margin-top: -300px;
}
</style>
</head>
<body>
<div>我在最底下</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
</form>
</div>
</body>
</html>
九、簡易博客頁面搭建
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cnblog</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<!-- 頭像 -->
<div class="blog-avatar">
<img src="1.png" alt="">
</div>
<!-- 標(biāo)題-->
<div class="blog-title">
<span>這是一篇好書推薦</span>
</div>
<div class="blog-info">
<span class="blog-info1"> 生活，其實是沒有好壞的，那只是我們在短暫的幾十年光景里的一種生命體驗。每一寸光陰，都值得收藏。僅此一次的分分秒秒，我們應(yīng)該怎么去對待？</span>
</div>
<div class="blog-link">
<ul>
<li><a href="">更多的美文</a></li>
<li><a href="">聯(lián)系我們</a></li>
<li><a href="">向我們投稿</a></li>
</ul>
</div>
<div class="blog-course">
<ul>
<li><a href="">《小王子》</a></li>
<li><a href="">《云邊有個小賣部》</a></li>
<li><a href="">《月亮與六便士》</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活著》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
</div>
<div class="article-end">
<span>#探尋活著的意義</span>
<span>#心態(tài)平和地面對人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活著》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
</div>
<div class="article-end">
<span>#探尋活著的意義</span>
<span>#心態(tài)平和地面對人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活著》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
</div>
<div class="article-end">
<span>#探尋活著的意義</span>
<span>#心態(tài)平和地面對人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活著》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
</div>
<div class="article-end">
<span>#探尋活著的意義</span>
<span>#心態(tài)平和地面對人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活著》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
</div>
<div class="article-end">
<span>#探尋活著的意義</span>
<span>#心態(tài)平和地面對人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活著》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
</div>
<div class="article-end">
<span>#探尋活著的意義</span>
<span>#心態(tài)平和地面對人生</span>
</div>
</div>
</div>
</div>
</body>
</html>
/*頁面通用的樣式*/
body{
margin: 0;
background-color: #eeeeee;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
padding-left: 0;
}
/*首頁左側(cè)樣式*/
.blog-left{
float: left;
width: 20%;
height: 100%;
background-color: cadetblue;
position: fixed;
left: 0;
top: 0;
}
.blog-avatar{
border: 4px solid aliceblue;
width: 160px;
height: 160px;
border-radius: 50%;
margin: 37px ;
/*margin: 18px auto;*/
overflow: hidden;
}
/*使得圖片放全*/
.blog-avatar img{
max-width: 100%;
}
.blog-title ,.blog-info{
color: black;
text-align: center;
margin: 37px auto;
}
.blog-info1 {
border: 2px solid white;
margin: 8px;
}
.blog-link,.blog-course{
text-align: center;
margin: 50px auto;
}
.blog-link ul>li,.blog-course ul>li{
padding: 8px;
}
.blog-link a,.blog-course a{
color: black;
font-size: 16px;
}
.blog-link a:hover,.blog-course a:hover{
color: darkgrey;
}
/*右側(cè)樣式*/
.blog-right{
float: right;
width: 80%;
height: 100%;
}
.article-list{
background-color: white;
margin: 20px 50px 20px 20px;
box-shadow: 20px 20px 20px rgba(0,0,0,0.5);
border-left: 5px solid cadetblue;
}
.article-list .article-title .img1{
/*float: left;*/
max-width: 100%;
border: 4px solid aliceblue;
width: 120px;
height: 120px;
border-radius: 30%;
margin: 17px ;
/*margin: 18px auto;*/
overflow: hidden;
transition: all 0.2s linear;
}
.article-list .article-title .img1:hover{
transform: scale(0.9);
transition: all 0.2s linear;
}
.blog-right .article-list .article-title .title {
float: right;
font-size: 38px;
margin-top: 8vh;
padding-right: 90vh;
}
.blog-right .article-list .article-title .date {
float: right;
font-size: 18px;
margin-top: -12vh;
margin-right: 5vh;
/*padding-right: 70vh;*/
}
/*.article-list .article-title .title{*/
/* font-size: 38px;*/
/* !*float: left;*!*/
/* margin-top: 0;*/
/* padding-left: 10px;*/
/*}*/
/*.article-list .article-title .date{*/
/* font-size: 18px;*/
/* font-weight: bolder;*/
/* float: right;*/
/* margin: 40px 40px;*/
/*}*/
.article-desc {
font-size: 20px;
font-weight: lighter;
text-indent: 20px;
border-bottom: 1px solid black;
}
.article-end {
padding: 10px 10px 10px 20px;
}
總結(jié)
以上是生活随笔為你收集整理的css边框，盒子模型、浮动、定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BZOJ2655 Calc - dp 拉
- 下一篇： python ascii codec c