5. css常用操作

作者: 瑟闻风倾 | 来源:发表于2019-09-23 14:32 被阅读0次

5. css常用操作
jQuery API学习之CSS操作函数与动画效果篇
day2
day02
JavaScript常用API合集
CSS常用操作
CSS常用操作
jQuery-02
JavaScript常用API总结
DAY02 2018-07-10

5.1 行内元素水平居中

备注：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

<body>
<div class="txtCenter">我要在父容器中水平居中显示。</div>
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>

div{
    border:1px solid red;
    margin:20px;
}
div.txtCenter{
    text-align:center;
}
.imgCenter{
    text-align:center;  /*img的父元素为div class="imgCenter"*/

5.2 行内元素垂直居中

备注：如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

<div>文字垂直居中显示</div>

div { 
height:25px; 
line-height:25px; 
overflow:hidden; //防止内容超出容器或者产生自动换行
}

注意：在Internet Explorer 6及以下版本中，这种方法不支持对图片设置垂直居中，可参考5.4的块级元素水平垂直居中来说实现。
拓展：CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用。

5.3 块级元素水平居中

(1) 使用margin属性进行水平对齐（使用margin: 0 auto;是最简单的水平居中方式）
eg1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link href="style_duiqi.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div">

    </div>
</body>
</html>

*{
    margin: 0px;
}
.div {
    width: 70%;
    height: 1000px;
    background-color: gray;
    margin-left: auto;
    margin-right: auto;
}

image.png
eg2：

<div class="box">
  <div class="content"></div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.content{
  width: 100%;
  height: 100px;
  background-color: brown;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
  margin: 0px auto;
}

image.png

居中不好使的原因：元素没有设置宽度；设置的是行内元素而不是块元素
(2) 使用position属性进行左右对齐
eg1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link href="style_duiqi.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div">

    </div>
</body>
</html>

*{
    margin: 0px;
}
.div {
    width: 70%;
    height: 1000px;
    background-color: gray;
    position: absolute;
    /*left: 0px;*/
    right: 0px;
}

右对齐.png
eg2：

<div class="box">
  <div class="content"></div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.content{
  width: 70%;
  height: 200px;
  background-color: brown;
  position: absolute;
  right: 0px;
}

image.png

(3) 使用float属性进行左右对齐
eg1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link href="style_duiqi.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div">

    </div>
</body>
</html>

*{
    margin: 0px;
}
.div {
    width: 70%;
    height: 1000px;
    background-color: gray;
    float: left;
    /*float: right;*/
}

左对齐.png

eg2：

<div class="box">
  <div class="content"></div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.content{
  width: 70%;
  height: 200px;
  background-color: brown;
  float: right;
}

image.png

5.4 块级元素水平垂直居中

(1) margin:auto法

效果图.png

<div>
   <img src="prince.png">
</div>

div{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

备注：当一个元素绝对定位时，它会根据第一个不是static定位的祖先元素定位，因此这里的img根据外层div定位。
(2) 弹性盒子法（flex布局）

效果图.png

<div class="container">
    <div class="inner">
        我在容器中水平垂直居中
    </div>
</div>

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;//flex布局
      justify-content: center;//使子项目水平居中
      align-items: center;//使子项目垂直居中
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

备注：justify-content控制水平方向的居中，align-items控制垂直方向的居中。这是CSS3的新属性。
(3) position

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

备注：

父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现

注意：如果元素未知宽度，只需margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
(4) table-cell布局

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

备注：因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用。

5.3 尺寸

尺寸常用属性.PNG

行高(常用来设置行间距的效果)

<body>
  <p class="p1">行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果</p>
  <p class="p2">行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果</p>
  <p class="p3">行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果</p>   
</body>

.p1{
  width: 20px;
  color: red;
  line-height: normal;
}
.p2{
  width: 20px;
  color: green;
  line-height: 200%;
}
.p3{
  width: 20px;
  color: blue;
  line-height: 50%;
}

最小最大宽度和高度

<view>
  <text class="p">最小最大宽度和高度效果</text>
</view>

.p{
  line-height: normal;
  min-width: 50px;
}

5.4 分类

分类操作属性.PNG

cursor：设置鼠标指针的效果

p{
  cursor: auto;// inherit,alias,cell
}

diaplay：设置元素是否显示及如何显示(常用来设置列表的方向)

<body>
  <ul>
   <li>hello1</li>
   <li>hello2</li>
   <li>hello3</li>
  </ul>
</body>

li{
  display: inline;
}

visibility：设置元素可见或不可见

li{
  display: inline;
  visibility: hidden;
}

5.5 导航栏

垂直导航栏
水平导航栏

5.6 图片

<body>
  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>
  
</body>

body{
  margin: 10px auto; 
  width: 70%;
  height: auto;
  background-color: greenyellow;
}
.image{
  border: 1px solid darkgray;
  width: auto;
  height: auto;
  float: left;
  text-align: center;
}
img{
  margin: 5px; 
  opacity: 0.5;
}
text{
  font-size: 12px;
  margin-bottom: 5px;
}
a:hover{
  background-color: burlywood;
}

备注：opacity为透明度(0~1)，0为完全透明，1为不透明。