CSS扩展

清疚 2022-06-04 04:25 118阅读 0赞

#### **项目经验小结（根据自己的需求而定）** ####

**一般情况**：  
静态页面用google  
交互用火狐firebug

**清浮动 （额外写一个div）**：  
有时候页面会很怪异的错乱，所以一定要养成清浮动的习惯：clear: both;  
<div style=”clear:both”></div>

**span标签跟a标签**，需要设置margin-top: 45px;的时候需要把它转成块标签

**nobr标签 不能乱用**：加上后会全局影响，p标签等段落文本不能分行

**常用属性：**  
display: **block**;\{块元素，一个要占用一行\}  
display: **inline-block**; \{行内块元素，一行可以多个\}

**一个行级元素如span等需要设置margin-top: 15px;的时候要在他们整个行的div中加这个属性，单个加不起作用**

**如果想让多个div这个块级元素显示在一行**，就需要给每个div设置行内块属性：  
display: inline-block;

**如果左右模块，当右边的模块被挤到下面来了，很有可能是计算宽度的时候没有将边框的宽度计算到里面去**  
border: 1px solid \#e0e0e0;（加了这个有关的属性，计算宽度的时候一定不能忽略它的宽度）

**有时候加的边框太长了，会占位置，这样设置居中等属性的时候会不起作用**

**文字居中：**  
text-align: center;

**css背景透明：**  
opacity: 0.5;

**div旋转：**  
transform: rotate(317deg);

**div的顺序也会影响布局，左右上下（自己总结，待议）**

**拿到一个网页开发需求，先分析可视区域，怎么布局**

**开篇：**  
\*\{  
padding: 0px;  
margin: 0 auto;  
text-decoration: none;//各种划线  
list-style: none; //去掉li点  
\}

**在一个100%的div中套一个1024的div并且居中：**  
.top-outside\{  
background: \#f5f5f5;  
width: 100%;  
height: 75px;  
\}  
.top-inside\{  
background: \#f5f5f5;  
width: 1024px;  
margin: 0 auto;  
height: 75px;  
\}

**使用相对布局：**  
在需要相对的div中写上：  
position: relative;  
在自己的div中写：  
position: absolute;  
在用 top，right调位置  
top: 53px;  
right: -3px;

#### **三种定位机制** ####

定位机制：  
**标准文档流 Normal flow**  
（从上倒下 从左到右，输出文档内容，**块级元素**\-独占一行，碰到边缘则自动换行。div ul li dl dt p…）  
(**行级元素**，内容能在同一行显示，不会改变文档的结构， span strong img input )  
**浮动** floats(用的浮动一定要记住清除浮动)  
**绝对定位** absolute positioning  
块级标签和行级标签 都是盒子模型

#### **层级处理** ####

**父div**  
position: relative;  
**每个子类：**  
position: absolute;  
z-index: 1;//控制层级关系,数字越大层级越高

**如果存在图片还有另外一种情况，就是把图片当做父布局背景去设置：**  
width: 100%;  
height: 455px;  
background: url(../img/img01.png);

#### **ul li** ####

**ul li 中间加竖线**  
用 border-right 可以控制  
也可以用一个偷懒的方法：<li>设为首页|</li> 控制

在**ul li 中中写position: absolute;**会导致所有的li元素都集中到一起，展示不开

**ul li默认是竖直显示的，想让水平展示**，可以给每个li加display: inline-block;

#### **修改a链接内容颜色（a链接的颜色必须要定位到特定属性值）** ####

点类名 a点id名  
如果点类名 a修改的是这个类里面的所有a链接内容  
.class a.id\{  
color: red;  
\}

#### **a标签跳转** ####

<a href=”javascript:void(0)”>这是第一条这是第一条这是第一条</a> \{有点击效果但是不会跳转\}  
<a href=”\#”>这是第一条这是第一条这是第一条</a> \{刷新当前页面\}

#### **图片居中** ####

1.直接用定位  
2.img外套一个壳：  
<span style=”height:100px;float: left;line-height: 100px;display:inline-block;”><img class=”img-bottom-bottom-left-bottom-you” src=”img/you.png”>  
img属性：  
vertical-align: middle;  
[CSS 图片在DIV中垂直居中的显示方法][CSS _DIV]

#### **做一个悬浮框** ####

right:0; //让窗体浮动到页面的哪一边，0的话就是紧靠在right边，非0就跑左边去了
    top:58%;  //窗体相对页面顶部的百分比
    z-index:999;// 表示该层高度，默认为1。如果一个元素的z-index小于其他元素且位置冲突的话就会被遮挡咯。
    position:fixed; //指布局方式为固定的,一般跟 z-index合用
    
    <style> #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% } </style>
    <div id="nav"></div>
    
    你可以使用css来浮动一个块，建议为浮动div，相关的关键样式为position: fixed，是指布局方式为固定的，为了防止被遮挡一般要搭配z-index:999或者更大的数字，表示该层高度，默认为1。如果一个元素的z-index小于其他元素且位置冲突的话就会被遮挡咯。

#### **css加悬浮阴影** ####

背景如果是一张图片，得把图片的宽高改为跟背后DIV的宽高一致：  
.future\_right\_img:hover\{  
opacity:0.3;  
filter:alpha(opacity=30);  
\}

#### **如何让其中一个div浮在另一个div上面** ####

#### **使用JQuery鼠标进入离开动态隐藏和显示DIV** ####

$(document).ready(function() { 
               $(".center-img-inside-right01").mouseover(function() { 
                    $(".center-img-inside-right-over").hide();
    
               })
               $(".center-img-inside-right01").mouseout(function() { 
                    $(".center-img-inside-right-over").show();
                    $(".center-img-inside-right-over").css('display','inline-block');
               })
         })

#### **圆角** ####

border-radius: 5px;  
border-top-left-radius: 5px;  
border-top-right-radius: 5px;  
border-bottom-right-radius: 5px;  
border-bottom-left-radius: 5px;

#### **下面是一个红色的点（可以是点或者方形等）** ####

display: inline-block; //转成行内块元素  
width: 8px;  
border-radius: 4px;  
height: 8px;  
background: red;  
margin-right: 5px;

#### **纯CSS实现三角形，圆形，菱形** ####

显示图形:  
![这里写图片描述][SouthEast]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style> .triangle{ border-color: red white white white; border-style: solid; border-width: 10px; width: 0; height: 0; } .lingxing{ margin-top:10px; border-color: red; border-style: solid; border-width: 10px; width: 0; height: 0; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .circle{ border-color: red ; border-style:solid; -webkit-border-radius:50px; border-radius: 50px; border-width:10px; width: 0; height: 0;} </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <div class="triangle">
    </div>
    <div class="circle">
    </div>
    <div class="lingxing"></div>
    </body>
    </html>

#### **关系符** ####

相邻选择符(E+F)  
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。  
CSS3 兄弟选择符(E~F)  
选择E元素后面的所有兄弟元素F。  
E~F VS. E+F：

此例，如果使用p + p\{color:\#f00;\}，那么p2, p5将会变成红色；如果使用p ~ p\{color:\#f00;\}，那么p2,p3,p4,p5将会变成红色；

#### **line-height** ####

line-height是行高，height就是高，通常height是对于某个框架或者图片来弄的，line-height用于文字

如果要实际效果你可以写一段文字，分好几行，然后对它做line-height属性，就会注意到变化了

比如：

调整20px这个值，行间距就会发生变化

另外，line-height和height组合到一块儿，还有一种效果，就是如果把它们的值设置的一样了，文字就会在垂直方向居中

#### overflow 属性 ####

**visible** :默认值。内容不会被修剪，会呈现在元素框之外。  
**hidden** :内容会被修剪，并且其余内容是不可见的。  
**scroll** :内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。  
**auto** :如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。  
**inherit** :规定应该从父元素继承 overflow 属性的值。  
**总结**：overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherit是继承父元素的overflow属性值，默认是scroll.

#### **display 属性** ####

**none** :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间  
**block** :此元素将显示为块级元素，此元素前后会带有换行符。  
**inline** :默认。此元素会被显示为内联元素，元素前后没有换行符。  
**inline-block** :行内块元素。（CSS2.1 新增的值）  
**list-item** :此元素会作为列表显示。  
**run-in** :此元素会根据上下文作为块级元素或内联元素显示。  
**compact** :CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。  
**marker** :CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。  
**table** :此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。  
**inline-table** :此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。  
**table-row-group** :此元素会作为一个或多个行的分组来显示（类似 <tbody>）。  
**table-header-group** :此元素会作为一个或多个行的分组来显示（类似 <thead>）。  
**table-footer-group** :此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。  
**table-row** :此元素会作为一个表格行显示（类似 <tr>）。  
**table-column-group** :此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。  
**table-column** :此元素会作为一个单元格列显示（类似 <col>）  
**table-cell** :此元素会作为一个表格单元格显示（类似 <td> 和 <th>）  
**table-caption** :此元素会作为一个表格标题显示（类似 <caption>）  
**inherit** :规定应该从父元素继承 display 属性的值。

#### **推荐阅读** ####

[CSS的三种定位方式介绍][CSS]  
[CSS的盒子模型案例][CSS 1]  
[CSS的浮动效果][CSS 2]  
[CSS中a标签的样式介绍][CSS_a]

[CSS _DIV]: https://jingyan.baidu.com/article/19192ad832d26de53e570738.html?st=2&net_type=&bd_page_type=1&os=0&rst=
[SouthEast]: /images/20220604/fddef7eb8dba4f91a9ab0661f7ca2780.png
[CSS]: http://blog.csdn.net/a352193394/article/details/7390198
[CSS 1]: http://blog.csdn.net/a352193394/article/details/7388701
[CSS 2]: http://blog.csdn.net/a352193394/article/details/7389936
[CSS_a]: http://www.nowamagic.net/csszone/css_IntroduceToTagA.php