您的位置:首页 > Web前端 > CSS

##CSS复习##②

2019-08-06 10:49 99 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XBT1118/article/details/98534506

CSS Display显示

CSS布局 - display属性

display
属性是CSS中用来控制布局的重要属性。其决定元素如何来显示。该属性有如下4中常用的取值,当然肯定不只这4种:

  • none
    - 当取值为none,等于让该元素完全消失(不会占据网页空间)
  • inline
    - 定义一个行内元素,且该元素的width属性和height属性不会起任何作用
  • block
    - 定义一个块级元素,该元素首末都会另起一行,该元素会占据整行宽度
  • inline-block
    - 定义一个行内块级元素,类似行内元素,但该元素的width和height是可以设置的

 

CSS Max-width

CSS布局 - 善用max-width

大多容器类型的HTML元素都是块级元素(Block),譬如最常用的div元素。这些元素本身就是会占据整行宽度。在部分场景下,如果使用max-width来取代width的功效,会使网页的自适应能力更强。配上使用

margin:auto;
会更加美观。

这些都是已经学过的,这里说的只是一些处理技巧,如下例所示:

div.ex1 {
width:360px;
margin: auto;
border: 3px solid #46acb6;
}

div.ex2 {
max-width:360px;
margin: auto;
border: 3px solid #46acb6;
}

CSS Position定位

CSS中的

position
属性是用来定义元素的定位方式( static / relative / fixed / absolute / sticky )。

Position 属性

position
属性可定义元素的定位方式,该属性有5种取值,如下:

  • static
  • relative
  • fixed
  • absolute
  • sticky

position: static

HTML元素在默认情况下的定位属性的取值都是static这个值。

当position属性取值static时,left/right/top/bottom这些属性不会被支持的,设置了也白搭,static定位时不会考虑这些的。

static定位时,该元素不会有啥特殊的功效,根据页面的正常布局方式。

这是一个div元素,其设置了position: static;

如下例所示:

div.static {
position: static;
border: 3px solid #46acb6;
}

 

position: relative

当position属性取值relative时,则意味其定位方式是相对定位,相对于普通定位(static定位的原有位置)而言,此时left/right/top/bottom属性就会生效,如下所示:

这是一个div元素,其设置了position: relative;

源码如下所示:

div.relative {
position: relative;
left: 72px;
border: 3px solid #46acb6;
}

 

position: fixed

当position属性取值fixed时,则意味其定位方式是相对于视窗(viewport)的绝对定位(视窗就是浏览器窗口),此时left/right/top/bottom属性就会生效,如下所示:

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #46acb6;
}

 

一些运营商的狗B黑产,还有一些以杀毒安全的名义暗地扶持流氓插件的浏览器,进行dns劫持后,在页面右下角弹出300*250px大小的垃圾广告的元素定位方式就是fixed;呵呵 ——_——|||

position: absolute

当元素positions属性取值为absolute时,即绝对定位。所谓绝对定位,类似fixed定位,但相对的不是视窗,而是相对于离该元素最近的已定位元素(只要不是static定位的都可以)。

这个div元素设置了position: relative;

这个div元素设置了position: absolute;

案例源码如下:

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #46acb6;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #46acb6;
}

 

position: sticky

当元素positions属性取值为sticky时,则会根据滚动条的位置,来切换relative和fixed的效果。

CSS Overflow

CSS布局 - Overflow

CSS中的

overflow
属性控制是用来定义内容太大超出范围的处理方式。其取值范围如下:

  • visible
    - 这是默认取值。超出部分不会被裁剪,而是直接超出元素本身的范围。
  • hidden
    - 超出部分会被裁剪掉,汝不会再看到超出的部分。
  • scroll
    - 超出部分会隐藏,但是可以通过滑动滚动条来浏览超出部分内容。(会强制显示滚动条)
  • auto
    - 超出部分会隐藏,但可以通过滚动来浏览超出部分内容。(类似scroll,但更雅观,当需要滚动的时候才会出现滚动条)

重要提示:overflow属性只针对有特定高度的块级元素(block)才会有效。

 

overflow-x 和 overflow-y

如果只想单独设置水平方向或垂直方向上的overflow属性,那使用

overflow-x
overflow-y
即可。

  • overflow-x
    - 只设置水平方向上的overflow属性
  • overflow-y
    - 只设置竖直方向上的overflow属性
div {
overflow-x: hidden; /* 隐藏水平方向上滚动条 */
overflow-y: scroll; /* 添加垂直方向上滚动条 */
}

CSS Float浮动

CSS中

float
属性定义一个元素的浮动方式。 CSS中
clear
属性定义指定元素的哪一侧不允许其他浮动元素

float属性

CSS中的

float
属性定义一个元素的浮动方式;其取值如下:

  • left
    - 使元素向左浮动
  • right
    - 使元素向右浮动
  • none
    - 不对元素设置浮动(默认)

Clear属性

CSS中的

clear
属性定义指定元素的哪一侧不允许其他浮动元素。该属性取值如下:

  • none
    - 这是默认取值,左右两侧都允许浮动元素的存在;
  • left
    - 元素左侧不允许浮动元素的存在;
  • right
    - 元素右侧不允许浮动元素的存在;
  • both
    - 元素左右两侧都不允许浮动元素的存在。

clear属性最多的应用场景是,在连续使用完浮动元素后,想重新回到使用非浮动元素的状态下,随意搞个空的元素,设置其clear属性为both即可。

浮动元素超出容器范围咋办呢?

经常会遇到浮动元素超出容器范围,那该怎么办呢?很简单,把外部容器设置上

overflow:auto;
就ok啦~(不过这不是最佳的方法,不过可以先试试)

利用float来实现各种布局

实现布局的方式很多,但万变不离其宗,贫道最推荐利用float的方式进行布局,除了上述的那些细节,还注意一下box-sizing属性使用border-box取值

CSS Inline-block

利用inline-block去实现导航条

<style>
.nav {
    background-color: #d4d854;
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.nav li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
}

div {
    resize: both;
    overflow: auto;
    border: 1px dotted Tomato;
    padding-bottom: 81px;
}
</style>
</head>
<body>

<div>
<h2>横向导航条</h2>
<ul class="nav">
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#mails">邮箱</a></li>    
  <li><a href="#games">游戏</a></li>
</ul>
<p>亲,可以拖拽改变大小试试看~</p>
</div>

CSS Align对齐

margin:auto

以前说过的,如果想是让一个块级元素(block)在水平方向上居中,可以使用

margin:auto
来搞定这事情。如下例所示:

.center {
margin: auto;
width: 50%;
border: 3px solid #46acb6;
padding: 10px;
}

提示:1.margin:auto要用在block类型元素,比如div元素;2.该元素必须设置特定的宽度

text-align:center 文本居中

如果想使一段文本居中对齐,那就使用

text-align:center
即可。

使一张图片居中

是一张图片在block元素中居中对齐的方式就是把这张图片设置上

display:block;
,然后套用
margin:auto
的方法就ok了~

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}

通过position属性实现左右对齐

通过position属性也可以实现元素的左对齐和右对齐。对目标元素设置

position: absolute;
即可,但是这种方式会使该元素脱离正常的页面元素排布序列,而覆盖其他元素,因此除非特殊需求,一般不推荐这种方式

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #46acb6;
padding: 10px;
}

通过float属性实现左右对齐

通过float属性也可以实现元素的左对齐和右对齐。

.right {
float: right;
width: 300px;
border: 3px solid #46acb6;
padding: 10px;
}

垂直方向上的居中 - 使用padding内边距

水平方向上的文本居中可以使用text-align属性搞定,而垂直方向上,这里可以用padding来实现一下。

.center {
padding: 70px 0;
border: 3px solid #46acb6;
text-align: center;
}

垂直方向上的居中 - 使用line-height行高

如果外部容器元素的高度是一个确定的数值单位,则这时使用

line-height
属性是更明智的选择。使外部元素的
line-height
属性等于
height
属性的值即可。

.center {
line-height: 200px;
height: 200px;
border: 3px solid #46acb6;
text-align: center;
}

/* 如果段落不只一行,下面的设置就起作用了 */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

垂直方向上的居中 - 使用position和transform

当padding和line-height的方法都不适用的时候,可用如下第三种方式来实现,即使用

position
transform
属性。

CSS 透明度

定义透明的图片

opacity
属性可定义元素的透明度,该属性的取值范围是0.0~1.0;取值越低,透明度越低;越高则透明度越高;当为0.0的时候,等于完全透明看不见;当为1.0时,完全不透明,跟没设置了该属性一样。

img {
opacity: 0.5;
filter: alpha(opacity=50); /* 兼容IE8以及更老的版本 */
}

透明的div元素 - 使用opacity属性

opacity
属性不仅适用于img元素,也适合于div等绝大部分元素。

div {
opacity: 0.3;
filter: alpha(opacity=30); /* 兼容IE8以及更老的版本 */
}

透明背景的div元素 - 使用rgba来定义背景色

使用opacity属性设置div元素的透明度,会使整个元素变成完全透明;如果仅仅是想把div元素的背景变成透明的,那就可以使用rgba来设置透明的背景色

div {
background: rgba(212, 216, 84, 0.3);
}

CSS 导航条

垂直导航条

为了实现垂直导航条(纵向导航栏),可以把<a>放在列表项li内,而且来修改个列表项的背景色:

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
width: 60px;
background-color: #eef8f8;
}

 


上例解析:

  • display: block
    使该li元素变成一个块级元素,如此,整个li元素会变得都可以点击了(刚才是只可以点击超链接的文字部分);不仅如此,而且因为是块级元素(Block),所以可以自由设置高度、宽度、内边距、外边距了;
  • width: 60px;
    定义列表项li的宽度;
  • background-color: #eef8f8
    即自定义设置了列表项li的背景色。

其实,汝也可以不设置a元素的宽度而去设置无序列表的宽度,因为a元素被定义成了block块级元素,而块级元素的默认特性就是会占据整行宽度。故而这种方式也是等效的。

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
background-color: #eef8f8;

进一步优化垂直导航条

设置鼠标悬浮在列表项上时的CSS样式

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #eef8f8;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* 鼠标悬浮时的样式 */
li a:hover {
background-color: #555;
color: white;
}

把垂直导航条固定到侧栏来试试。

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling */

水平导航条

实现水平导航条有两种思路,即inlinefloat两种思路。


inline思路

将列表项元素的display属性设置成inline,如此,列表项就不会换行了,从而实现水平导航条,如下所示:

li {
display: inline;
}

CSS 下拉菜单

下拉菜单按钮

类似上一个案例,而不同的是下拉框中是一组菜单按钮。

 

 

<style>
.dropbtn {
background-color: #46acb6;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #eef8f8;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #46acb6;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #2c7177;
}
</style>

<div class="dropdown">
<button class="dropbtn">下拉菜单按钮</button>
<div class="dropdown-content">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</div>

在导航条中添加下拉菜单按钮

下拉菜单按钮经常被应用在导航条中,从而更直观地展示网站的层次与逻辑,也方便了用户的快捷访问。

  <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #46acb6; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } </style> <ul> <li><a href="#home">首页</a></li> <li><a href="#news">新闻</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">游戏</a> <div class="dropdown-content"> <a href="#">吃鸡</a> <a href="#">吃鸭</a> <a href="#">吃鹅</a> </div> </li> </ul>

CSS 表单

设置input元素的样式

关于input元素的选择器倒是花样不少,如下所示:

  • input[type=text]
    - 只选择type属性为text的input元素
  • input[type=password]
    - 只选择type属性为password的input元素
  • input[type=number]
    - 只选择type属性为number的input元素

源码如下:

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] {
background-color: #46acb6;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}

input[type=submit]:hover {
background-color: #45a049;
}

.container {
border-radius: 5px;
background-color: #eef8f8;
padding: 20px;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>

<p><b>自适应表单:</b>试着去改变一下浏览器的大小来看看表单的变化吧~</p>

<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>

</body>
</html>

 

 

CSS 单位

 

 

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: