布局方式总结

Xxhny_

已于 2023-04-10 12:40:25 修改

阅读量104

点赞数

文章标签：数据分析

于 2023-04-10 12:36:29 首次发布

本文链接：https://blog.csdn.net/Xxhny_/article/details/130053788

版权

文章目录

前言

css 是一个网页的外衣，网页好不好看取决于 css 样式，而布局是 css 中比较重要的部分，当产品把一个需求设计交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是 html 的结构，根据要兼容的浏览器，数据的拼接，代码的可维护性，扩展性来选择 css 的布局方法。有时候，一个好的布局可以减少很多代码，用 css 处理网页布局的时候有很多技巧性的东西。

一、盒子布局

boder ------ 边框上右下左

none	定义无边框
hidden	与“none”相同。不过应用于表时之外，对于表，hidden用于解决边框冲突
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线

padding ---- 内边距------内容距离边框的距离上右下左

margin ------外边距 ------ 边框距离页面的距离

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">    
   <meta http-equiv="X-UA-Compatible" content="IE=edge">    
   <meta name="viewport" content="width=device-width, initial-scale=1.0">    
   <title>盒子布局</title>
   <style>
     div{
        width: 100px;           
        height: 100px;           
        background-color: red;           
        border: 1px solid black;            
        padding: 20px;            
        margin-left: 100px;
 }    
   </style>
</head>
<body>     
    <div>这是一个div</div>
</body>
</html>

二、元素的分类

块级元素 ------- 独占一行(自动换行) div p hn hr 可以设置宽度和高度

行内元素（内联） ------ 不会自动换行 a span 不可以设置宽度和高度（不起作用）

display可以实现块级元素和行内元素之间互换

属性取值：

none ----- 表示不会被显示，隐藏元素的方式之一

block ----- 将元素变为块级元素，也会自动换行（默认有个换行符）

inline ----- 将元素变为行内元素、

none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符

注意：css中隐藏元素的方式：

第一种:dispaly：none;

第二种：width:0;height:0;

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">   
 <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>元素分类</title>    
<style>        
   div{            
   width: 100px;           
   height: 100px;            
   border: 1px solid black;           
   /* display: inline; */        
}        
   a{            
   width: 100px;            
   height: 100px;            
   border: 1px solid black;            
   display: block;        
}        
   .one{            
  /* width: 100px;            
  height: 100px;            
  background-color: red;            
  display: none; */            
  width: 0;
  height: 0;        
}    
</style>
</head>
<body>   
   <div class="one"></div>   
   <div>这是第二个div</div>   
   <div>这是第三个div</div>   
   <a href="#">这是第一个a标签</a>   
   <a href="#">这是第二个a标签</a>   
   <a href="#">这是第三个a标签</a>   
   <a href="#">这是第四个a标签</a>
</body>
</html>

三、浮动布局

通过float属性去设置浮动布局

取值：left none(不浮动) right

注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响

如果要消除这种影响（消除浮动）通过clear属性

none:默认允许两边都可以浮动

left：不允许左边的浮动

right：不允许右边的浮动

both：不允许两侧有浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset&

最低0.47元/天解锁文章

Xxhny_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫