教程4

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

如果图像是右浮动，下面的文本流将环绕在它左边：

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

为了文本在元素内居中对齐，可以使用 text-align: center;

让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

我们可以使用 position: absolute; 属性来对齐元素:

我们也可以使用 float 属性来对齐元素:

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

垂直居中 - 使用 line-height

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p
{
  background-color:yellow;
}

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

css 伪类：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child
{
    color:blue;
}

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

p > i:first-child
{
    color:blue;
}

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{
    color:blue;
}

为所有选中的输入元素设置背景颜色：

input:checked {
    height: 50px;
    width: 50px;
}

input[type="text"]:disabled

p:empty 没有子元素的p元素

input:enabled{}选择启用的表单元素

p:first-of-type 选择每个p元素是其父元素的第一个子元素的p元素

区别

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，

input:in-range选择元素值在指定范围的输入框

input:out-of-range <input type="number" min="5" max="10" value="17" />

:nth-child(1)

:nth-of-type(2)

:nth-last-of-type(1)

:not(p) 选择除p以外的元素

p:only-of-type

p:only-child

p:before 在每个<p>元素之前插入内容

p:first-letter

p:first-line

input:required

h1:before { content:url(smiley.gif); }

li a:hover:not(.active) {

    background-color: #555;

    color: white;

}


inline 和 float都可以创建水平导航栏
缺点前者： 我们知道div块状元素，转换为inline-block后，它们之间是存在有间隙的
如果原先垂直的元素变为水平 会出现间隙，解决方法 ：采用float




例子：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul{
            list-style-type: none;
            padding:0;
            width: 15%;
        }
        li{
            width:100%;
            padding:10px 20px;
            background:#eeeeee;
            border:1px solid red;
        }
        li:first-child{
            border-bottom: none;
        }
        li:last-child{
            border-top: none;
        }
        li.active{
            background:blue;
            color:white;
        }
        li:not(.active):hover{
            background:pink;
        }
        @media screen and (max-width: 1750px){
            body{
                background: blue
            }
        }
        @media screen and (max-width: 1050px){
            body{
                background: yellow
            }
        }
        @media screen and (max-width: 400px){
            body{
                background: red
            }
        }
    </style>
</head>
<body>
   <ul>
       <li class="active">标题</li>
       <li>标题</li>
       <li>标题</li>
   </ul>
</body>
</html>

 透明度

opacity:0.4;
    filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */

图像拼合技术

img.next {
    width: 43px;
    height: 44px;
    background: url(/images/img_navsprites.gif) -91px 0;
}

媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}

更多媒体类型请点击查看https://www.runoob.com/css/css-mediatypes.html

属性选择器：
IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
把包含标题（title）的所有元素变为蓝色：
[title] { color:blue; }
[title=runoob] 或者 [title="runoob"]


[title~=hello] 将选中包含hello的title  p title="student hello">Hello CSS students!</p>
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:  [lang|=en] { color:blue; }

重点总结：

"value 是完整单词" 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：

　　输入框的样式：

 width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
 width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
color: white;

input[type=text]:focus {
  background-color: lightblue;
}

 background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;

-webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;

按钮样式

 background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;

posted on 2019-08-10 16:38 渐凸强、啊哈阅读(186) 评论(0) 编辑收藏举报

刷新页面返回顶部

教程4

垂直居中 - 使用 line-height

公告