CSS学习

努力破十万 發表於 2021-7-18 14:33:00

<h1 id="css学习">CSS学习</h1>
<h2 id="伪类选择器">伪类选择器</h2>
<p>以:开头的选择器称为伪类选择器</p>
<h3 id="链接伪类选择器">链接伪类选择器</h3>
<p>用于处理a标签链接的选择器</p>
<ul>
<li>
<p>a:link    指未被访问时的a标签</p>
</li>
<li>
<p>a:visited 指被访问过的a标签</p>
</li>
<li>
<p>a:hover 指鼠标经过时的a标签</p>
</li>
<li>
<p>a:active 指鼠标点击时的a标签</p>
<pre><code class="language-css">    a:link {
         color: #000;
         text-decoration: none;
   }

   a:visited {
         color: orange;
   }

   a:hover {
         color: skyblue;

         text-decoration: underline;
   }

   a:active {
         color: green;
   }
</code></pre>
</li>
</ul>
<blockquote>
<p>注意：整体顺序需要按照<strong>LVHA</strong>的顺序书写，a标签具有默认的样式，在给a标签设置样式时，需要单独设置</p>
</blockquote>
<h3 id="focus伪类选择器">focus伪类选择器</h3>
<p>用于选取获得焦点的表单元素input，即<strong>input:focus</strong>，例如：</p>
<pre><code class="language-css">/*鼠标聚焦时背景变为红色*/
input:focus {
background-color: red;
}
</code></pre>
<h2 id="元素显示模式">元素显示模式</h2>
<p>元素显示模式意思就是元素（标签）以什么方式显示主要分为<strong>块元素</strong>和<strong>行内元素</strong>两种</p>
<h3 id="块元素">块元素</h3>
<p>常见的有<code><h1>~<h6>、<p>、<div>、<ul>、<ol>、<li></code>等，块元素有以下特点</p>
<ul>
<li>自己独占一行</li>
<li>高度、宽度、内外边距都能控制</li>
<li>宽度默认是容器（父级宽度）的100%</li>
<li>是一个容器及合资，里面可以放行内或者块元素</li>
</ul>
<blockquote>
<p>注意：文字类元素不能使用块元素，</p><p>标签主要存放文字，p里面不能放块元素，特别不能放div，同理<code><h1>~<h6></code>也是。</p>
</blockquote>
<h3 id="行内元素">行内元素</h3>
<p>常见的有<code><a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span></code>等，行内元素具有以下特点：</p>
<ul>
<li>相邻行内元素在一行上，一行可以显示多个</li>
<li>高宽设置都是无效的</li>
<li>默认宽度是本身内容的宽度</li>
<li>行内元素只能容纳文本或者其他行内元素</li>
</ul>
<blockquote>
<p>注意：链接里不能再放链接，特殊情况<code><a></code>里可以放块元素，到那时最好给a转换一下块级模式</p>
</blockquote>
<h3 id="行内块元素">行内块元素</h3>
<p>行内元素有几个特殊的标签：<code><img>、<input>、<td></code>，他们同时具有块元素和行内元素的特点：</p>
<ul>
<li>和相邻的行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个</li>
<li>默认宽度就是本身内容的宽度</li>
<li>高度、行高、内外边距都可以控制</li>
</ul>
<h3 id="元素显示默认的转换">元素显示默认的转换</h3>
<p>特殊情况下，需要进行元素模式转换，即需要将行内元素转化成块元素，就可以设置宽高了，常见的就是a标签，有时我们需要增加a标签的触发范围，就需要为a链接设置宽高，转换为块级元素语法为：</p>
<pre><code class="language-css">a {
/*行内元素转换为块级元素*/
display: block;
width: 100px;
height: 100px;
}
</code></pre>
<p>块级元素也可以指定为行内元素：</p>
<pre><code class="language-css">div {
display: inline;
}
</code></pre>
<p>转换为行内块元素</p>
<pre><code class="language-css">span {
display: inline-block;

}
</code></pre>
<h2 id="背景">背景</h2>
<h3 id="背景颜色">背景颜色</h3>
<pre><code class="language-css">body {
background-color: red;
}
</code></pre>
<h3 id="背景图片">背景图片</h3>
<pre><code class="language-css">body {
background-image: url(http://aaa/bbb/ccc);
}
</code></pre>
<h3 id="背景平铺">背景平铺</h3>
<pre><code class="language-css">body {
background-image: url(http://aaa/bbb/ccc);
/*不重复*/
background-repeat: no-reapeat;
}
</code></pre>
<h3 id="背景位置">背景位置</h3>
<ul>
<li>
<p>方位名词</p>
<p>采用top、left、center、right、bottom</p>
<pre><code class="language-css">body {
background-image: url(http://aaa/bbb/ccc);
/*不重复*/
background-repeat: no-reapeat;
/*左上位置*/
background-position: left top;
}
</code></pre>
</li>
<li>
<p>精确单位</p>
<p>采用具体的像素，第一个值表示x轴，第二个值表示y轴</p>
<pre><code class="language-css">body {
background-image: url(http://aaa/bbb/ccc);
/*不重复*/
background-repeat: no-reapeat;
/*左上位置*/
background-position: 20px 50px;
}
</code></pre>
</li>
<li>
<p>混合单位</p>
<p>将方位名词和像素值混合使用</p>
<pre><code class="language-css">body {
background-image: url(http://aaa/bbb/ccc);
/*不重复*/
background-repeat: no-reapeat;
/*距离上侧50px，左右居中显示*/
background-position: center 50px;
}
</code></pre>
</li>
</ul>
<h3 id="背景固定">背景固定</h3>
<p>将背景固定在屏幕一个地方，不随屏幕滚动而滚动</p>
<pre><code class="language-css">body {
background-image: url(http://aaa/bbb/ccc);
/*不重复*/
background-repeat: no-reapeat;
/*距离上侧50px，左右居中显示*/
background-position: center 50px;
/*固定显示，如不声明则默认滚动*/
background-attachment: fixed
}
</code></pre>
<h3 id="图片复合写法">图片复合写法</h3>
<p>background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置</p>
<pre><code class="language-css">body {
background: black url(http://aaa/bbb/ccc) no-repeat fixed center top;
}
</code></pre>
<h3 id="背景色半透明">背景色半透明</h3>
<pre><code class="language-css">body {
/*最后一个值是透明度*/
background: rgba(0, 0, 0, 0.3);
}
</code></pre>
<h2 id="css选择器的优先级">CSS选择器的优先级</h2>
<table>
<thead>
<tr>
<th>选择器</th>
<th>权重</th>
</tr>
</thead>
<tbody>
<tr>
<td>继承或者*</td>
<td>0,0,0,0</td>
</tr>
<tr>
<td>标签选择器</td>
<td>0,0,0,1</td>
</tr>
<tr>
<td>类/伪类选择器</td>
<td>0,0,1,0</td>
</tr>
<tr>
<td>ID选择器</td>
<td>0,1,0,0</td>
</tr>
<tr>
<td>行内式 style = ""</td>
<td>1,0,0,0</td>
</tr>
<tr>
<td>!important</td>
<td>无穷大</td>
</tr>
</tbody>
</table>
<h3 id="css选择器优先级叠加问题">CSS选择器优先级叠加问题</h3>
<p>当我们使用复合选择器时，CSS的优先级会进行叠加，比如：</p>
<pre><code class="language-css">/*最终优先级为0,0,0,3*/
div ul li {

}
/*最终优先级为0,0,1,2*/
.nav ul li {

}
/*最终优先级为0,0,1,1*/
a:hover {

}
/*最终优先级为0,0,1,1*/
.nav a {

}
/*最终优先级为 0,1,0,1*/
#people a{

}
</code></pre>
<blockquote>
<p>注意：权重的叠加不会进位，即低优先级的选择器再怎么叠加也永远不会大于高优先级的，<strong>继承的权重是0</strong>。</p>
</blockquote>
<h2 id="css盒子模型">CSS盒子模型</h2>
<p>盒子内容包括：边框、外边距、内边距、实际内容</p>
<p><img src="https://images.cnblogs.com/cnblogs_com/yxb-blog/2001677/o_210718063929image-20210616231529289.png" alt="image-20210616231529289" loading="lazy"></p>
<h3 id="边框border">边框border</h3>
<pre><code class="language-css">div {
/*宽度样式颜色三个参数没有顺序*/
/*样式：solid：实线边框 dashed：虚线边框 dotted：点线边框第三个参数是 */
border: 1px solid red;
/*上边框*/
border-top: 1px;
/*下边框*/
border-bottom: 1px;
/*左边框*/
border-left: 1px;
/*右边框*/
border-right: 1px;
/*合并相邻的边框*/
border-collapse: collapse;
}
</code></pre>
<blockquote>
<p>注意：给盒子加border会增大盒子的大小</p>
</blockquote>
<h3 id="外边距margin">外边距margin</h3>
<pre><code class="language-css">div {
/*四边外边距都是1px*/
margin: 1px;
/*上下1px 左右2px*/
margin: 1px 2px;
/*上1px 左右2px 下3px*/
margin: 1px 2px 3px;
/*上右下左顺序*/
margin: 1px 2px 3px 4px;
}
</code></pre>
<h4 id="外边距让盒子水平居中显示">外边距让盒子水平居中显示</h4>
<p>margin可以让盒子水平居中显示，但是必须为盒子设置宽度</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .header {
         width: 500px;
         height: 100px;
         background-color: #ff8500;
         /*水平居中对齐，左右设置为auto*/
         margin: 0 auto;
   }
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
</code></pre>
<h4 id="外边距合并问题">外边距合并问题</h4>
<ol>
<li>当上下两个兄弟块元素相遇时，如果上面的有margin-bottom 下面的有margin-top则会出现外边距合并的问题，取较大者。</li>
</ol>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .damao, .ermao {
         width: 200px;
         height: 200px;
         background-color: pink;
   }

   .damao {
         margin-bottom: 100px;
   }

   .ermao {
         /*取200px*/
         margin-top: 200px;
   }
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div></div>
</body>
</html>
</code></pre>
<blockquote>
<p> 解决思路：所以尽量只给一个盒子添加margin值。</p>
</blockquote>
<ol start="2">
<li>
<p>嵌套块元素外边距塌陷，父子块元素，都指定margin-top时，父元素会塌陷，塌陷的结果以最大的margin值为准</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .p {
         margin-top: 100px;
         width: 400px;
         height: 400px;
         background-color: purple;
   }

   .c {
         /*塌陷了*/
         margin-top: 200px;
         width: 200px;
         height: 200px;
         background-color: pink;
   }
</style>
</head>
<body>

<div class="p">
<div class="c"></div>
</div>
</body>
</html>
</code></pre>
<blockquote>
<p>解决思路：</p>
<ol>
<li>为父元素定义上边框</li>
<li>为父元素定义上内边距</li>
<li><strong>为父元素添加overflow:hidden（常用）</strong></li>
</ol>
</blockquote>
</li>
</ol>
<h3 id="内边距padding">内边距padding</h3>
<p>padding是盒子边框与内容之间的间距</p>
<pre><code class="language-css">div {
/*四边内边距都是1px*/
padding: 1px;
/*上下1px 左右2px*/
padding: 1px 2px;
/*上1px 左右2px 下3px*/
padding: 1px 2px 3px;
/*上右下左顺序*/
padding: 1px 2px 3px 4px;
}
</code></pre>
<blockquote>
<p>注意：padding会影响盒子的大小，会撑大盒子，在做导航栏是经常利用padding撑开盒子的操作来解决导航栏文字长度不固定的问题，如果不给盒子指定宽度则不会撑大盒子</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

   * {
         margin: 0;
         padding: 0;
   }

   div {
         height: 200px;
         width: 400px;
         background-color: #ff8500;
   }

   p {
         height: 100px;
         background-color: #4c4c4c;
   /*p没有指定宽度则和父亲一样宽，这种情况给p设置padding也不会撑大盒子*/
         padding: 0 20px;
   }
</style>
</head>
<body>

<div>
<p>这种情况不会撑大盒子</p>
</div>
</body>
</html>
</code></pre>
<h2 id="浮动">浮动</h2>
<h3 id="清除浮动的四种方法">清除浮动的四种方法</h3>
<ol>
<li>
<p>额外标签法也称为隔墙法，是 W3C 推荐的做法。</p>
<p>额外标签法会在浮动元素末尾添加一个空的标签。例如 </p><div style="clear: both"></div>，或者其他标签（如<br>等。<p></p>
</li>
<li>
<p>父级添加 overflow 属性</p>
<pre><code class="language-css">.parent {
overflow: hidden;
}
</code></pre>
</li>
<li>
<p>父级添加after伪元素</p>
<pre><code class="language-css">.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
</code></pre>
</li>
<li>
<p>父级添加双伪元素</p>
<pre><code class="language-css">.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
</code></pre>
</li>
</ol>
<h2 id="定位">定位</h2><br><br>
来源：https://www.cnblogs.com/yxb-blog/p/15026531.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习