首页 › CSS论坛 › CSS学习

乱我心者贝者 發表於 2020-3-28 14:56:00

CSS学习

<h1 id="什么是css">什么是CSS：</h1>
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式。<br>
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
<h1 id="盒子模型">盒子模型：</h1>
<p>盒模型是CSS中的核心的概念，描述了元素如何显示。</p>
<h2 id="盒子模型分类">盒子模型分类：</h2>
<p>盒子模型分为两种：W3c标准盒子模型和IE盒子模型</p>
<p>W3C盒子模型：这种盒子模型设置的宽度就是内容的宽度，其他的边距和边框都是在盒子外边<br>
IE盒子模型：这种盒子模型的内容高度是除去内边距、外边框、外边距的高度，盒子的整体高度就是我们设置的高度（height）。</p>
<p>设置盒模型的方式是：设置box-sizing</p>
<pre><code>box-sizing:content-box标准盒模型
box-sizing:border-box   怪异盒模型
</code></pre>
<h2 id="盒子模型的四种元素">盒子模型的四种元素：</h2>
<ul>
<li>Margin(外边距) - 清除边框外的区域，外边距是透明的。</li>
<li>Padding(内边距) - 清除内容周围的区域，内边距是透明的。</li>
<li>Border(边框) - 围绕在内边距和内容外的边框。</li>
<li>Content(内容) - 盒子的内容，显示文本和图像。<br>
<img src="https://img2020.cnblogs.com/blog/1736986/202003/1736986-20200328140042633-161809395.png" alt="" loading="lazy"></li>
</ul>
<h2 id="margin外边距">Margin(外边距)：</h2>
<ul>
<li>margin-top：上边距</li>
<li>margin-buttom：下边距</li>
<li>margin-left：左边距</li>
<li>margin-right：右边距</li>
</ul>
<pre><code>/* margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距 */
margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
</code></pre>
<h2 id="padding内边距">Padding(内边距):</h2>
<ul>
<li>padding-top：上部填充</li>
<li>padding-right：右部填充</li>
<li>padding-bottom：下部填充</li>
<li>padding-left：左部填充</li>
</ul>
<pre><code>/* padding属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距 */
padding: 10px 20px 30px 40px;

/* 下面样式与上面的样式等价 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
</code></pre>
<h2 id="border边框">Border(边框):</h2>
<ul>
<li>border-top：上边界</li>
<li>border-bottom：下边界</li>
<li>border-left：左边界</li>
<li>border-right：右边界</li>
</ul>
<pre><code>/* 使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的 */
border: 2px solid green;
/* 下面的样式与上面的样式等价 */
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
</code></pre>
<ul>
<li>border-width：边界宽度</li>
<li>border-style：边界样式</li>
<li>border-color：边界颜色</li>
</ul>
<pre><code>/* 使用简写属性设置宽度、样式和颜色，同时作用于四条边 */
border: 2px dotted green;
/* 下面的样式与上面的样式等价 */
border-width: 2px;
border-style: dotted;
border-color: green;
</code></pre>
<ul>
<li>border-top-width：上边界宽度</li>
<li>border-top-style：上边界样式</li>
<li>border-top-color：上边界颜色</li>
<li>border-bottom-width：下边界宽度</li>
<li>border-bottom-style：下边界样式</li>
<li>border-bottom-color：下边界颜色</li>
<li>border-left-width：左边界宽度</li>
<li>border-left-style：左边界样式</li>
<li>border-left-color：左边界颜色</li>
<li>border-right-width：右边界宽度</li>
<li>border-right-style：右边界样式</li>
<li>border-right-color：右边界颜色</li>
</ul>
<pre><code>/* 使用简写属性设置宽度、样式和颜色，同时作用于一条边 */
border-top: 2px solid green;
/* 下面的样式与上面简写样式等价 */
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
</code></pre>
<ul>
<li>border-radius：边界半径</li>
<li>border-top-left-radius：左上角</li>
<li>border-top-right-radius：右上角</li>
<li>border-bottom-left-radius：左下角</li>
<li>border-bottom-left-radius：右下角</li>
</ul>
<pre><code>/*以简写属性的三个值为例*/
border-radius: 10px 20px 30px;
/*下面样式与上面简写属性样式等价*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
</code></pre>
<h1 id="css选择器">CSS选择器：</h1>
<h2 id="元素选择器针对一类标签">元素选择器：针对一类标签</h2>
<pre><code>html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</code></pre>
<h2 id="选择器分组针对多个特定的标签使用可以将任意多个选择器分组在一起">选择器分组：针对多个特定的标签使用，可以将任意多个选择器分组在一起</h2>
<pre><code>/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}

/* grouping */
h1, h2, h3 {color:blue;}
</code></pre>
<h2 id="类选择器针对你想要的所有标签使用">类选择器：针对你想要的所有标签使用</h2>
<pre><code>/* 语法 */
.important {color:red;}

/* 结合元素选择器 */
p.important {color:red;}
</code></pre>
<h2 id="id选择器以一种独立于文档元素的方式来指定样式">ID选择器：以一种独立于文档元素的方式来指定样式</h2>
<pre><code>#intro {font-weight:bold;}
</code></pre>
<h2 id="属性选择器根据元素的属性及属性值来选择元素">属性选择器：根据元素的属性及属性值来选择元素</h2>
<pre><code>a {color:red;}
</code></pre>
<h2 id="后代选择器选择作为某元素后代的元素">后代选择器：选择作为某元素后代的元素</h2>
<pre><code>/* 只对 h1 元素中的 em 元素应用样式 */
h1 em {color:red;}
</code></pre>
<h2 id="子元素选择器选择作为某元素子元素的元素">子元素选择器：选择作为某元素子元素的元素</h2>
<pre><code>/* 只作为 h1 元素子元素的 strong 元素 */
h1 &gt; strong {color:red;}
</code></pre>
<h2 id="相邻兄弟选择器选择紧接在另一元素后的元素且二者有相同父元素">相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素</h2>
<pre><code>/* 增加紧接在 h1 元素后出现的段落的上边距 */
h1 + p {margin-top:50px;}
</code></pre>
<h2 id="伪类向某些选择器添加特殊的效果">伪类：向某些选择器添加特殊的效果</h2>
<pre><code>selector : pseudo-class {property: value}
</code></pre>
<h1 id="css背景">CSS背景：</h1>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>background</td>
<td>简写属性，作用是将背景属性设置在一个声明中</td>
</tr>
<tr>
<td>background-color</td>
<td>设置元素的背景颜色</td>
</tr>
<tr>
<td>background-image</td>
<td>把图像设置为背景</td>
</tr>
<tr>
<td>background-repeat</td>
<td>设置背景图像是否及如何重复</td>
</tr>
<tr>
<td>background-attachment</td>
<td>设置背景图像是否固定或者随着页面的其余部分滚动</td>
</tr>
<tr>
<td>background-position</td>
<td>设置背景图像的起始位置</td>
</tr>
</tbody>
</table>
<h1 id="css文本样式">CSS文本样式：</h1>
<table>
<thead>
<tr>
<th>属性名</th>
<th>含义</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>font</td>
<td>设置所有字体属性</td>
<td>font:italic bold 36px "宋体";</td>
</tr>
<tr>
<td>font-family</td>
<td>设置字体类型</td>
<td>font-family:"隶书";</td>
</tr>
<tr>
<td>font-size</td>
<td>设置字体大小</td>
<td>font-size:12px;</td>
</tr>
<tr>
<td>font-style</td>
<td>设置字体风格</td>
<td>font-style:italic;</td>
</tr>
<tr>
<td>font-weight</td>
<td>设置字体的粗细</td>
<td>font-weight:bold;</td>
</tr>
</tbody>
</table>
<h1 id="css布局">CSS布局：</h1>
<h2 id="position定位relative-absolute">position定位relative absolute</h2>
<p>position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。</p>
<p>对应的HTML结构：</p>
<pre><code>&lt;div class="divcss5"&gt;
    &lt;div class="divcss5-a"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>对应的CSS代码：</p>
<pre><code>&lt;style&gt;
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
&lt;/style&gt;
</code></pre>
<h2 id="float浮动">float浮动：</h2>
<p>float属性的属性值：</p>
<ul>
<li>none# 不浮动</li>
<li>left# 元素向左浮动，而后面的内容流向对象的右侧</li>
<li>right# 对象向右浮动，而后面的内容流向对象的左侧</li>
</ul>
<p>清除浮动clear:</p>
<ol>
<li>直接在最下面加入一个空的子元素块（<div style="clear: both"></div>）</li>
<li>在父元素中设置overflow:hidden;</li>
</ol>
<ul>
<li>css中溢出的使用overflow：设置当对象的内容超过其指定的高度及宽度时，进行管理值：</li>
<li>overflow:visible;# 默认值，不剪切内容，也不添加滚动条</li>
<li>overflow:auto;# 在必须时，对象内容才会被剪切或者显示滚动条</li>
<li>overflow:hidden;# 不显示超过对象尺寸的内容</li>
<li>overflow:scroll;# 总是显示滚动条</li>
</ul>
<ol start="3">
<li>用伪类after</li>
</ol>
<pre><code>.clearFix:after{
         clear:both;
         display:block;
         visibility:hidden;
         height:0;
         line-height:0;
         content:"";
}
</code></pre>
<h2 id="flexible-box弹性布局">Flexible Box弹性布局：</h2>
<ol>
<li>容器的属性：</li>
</ol>
<ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>flex-flow</li>
<li>justify-content</li>
<li>align-items</li>
<li>align-content</li>
</ul>
<ol start="2">
<li>flex-direction属性<br>
flex-direction属性决定主轴的方向（即项目的排列方向）。</li>
</ol>
<ul>
<li>row（默认值）：主轴为水平方向，起点在左端。</li>
<li>row-reverse：主轴为水平方向，起点在右端。</li>
<li>column：主轴为垂直方向，起点在上沿。</li>
<li>column-reverse：主轴为垂直方向，起点在下沿。<br>
<img src="https://img2020.cnblogs.com/blog/1736986/202003/1736986-20200328151526589-439138968.png" alt="" loading="lazy"></li>
</ul>
<ol start="3">
<li>flex-wrap属性<br>
flex-wrap属性默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</li>
</ol>
<ul>
<li>nowrap（默认）：不换行。</li>
<li>wrap：换行，第一行在上方。</li>
<li>wrap-reverse：换行，第一行在下方。<br>
<img src="https://img2020.cnblogs.com/blog/1736986/202003/1736986-20200328151601877-343482957.png" alt="" loading="lazy"></li>
</ul>
<ol start="4">
<li>
<p>flex-flow属性<br>
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>
</li>
<li>
<p>justify-content属性<br>
justify-content属性定义了项目在主轴上的对齐方式。</p>
</li>
</ol>
<ul>
<li>flex-start（默认值）：左对齐</li>
<li>flex-end：右对齐</li>
<li>center： 居中</li>
<li>space-between：两端对齐，项目之间的间隔都相等。</li>
<li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。<br>
<img src="https://img2020.cnblogs.com/blog/1736986/202003/1736986-20200328151750931-246711374.png" alt="" loading="lazy"></li>
</ul>
<ol start="6">
<li>align-items属性<br>
align-items属性定义项目在交叉轴上如何对齐。</li>
</ol>
<ul>
<li>flex-start：交叉轴的起点对齐。</li>
<li>flex-end：交叉轴的终点对齐。</li>
<li>center：交叉轴的中点对齐。</li>
<li>baseline: 项目的第一行文字的基线对齐。</li>
<li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。<br>
<img src="https://img2020.cnblogs.com/blog/1736986/202003/1736986-20200328151833979-1309547720.png" alt="" loading="lazy"></li>
</ul>
<ol start="7">
<li>align-content属性</li>
</ol>
<ul>
<li>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</li>
<li>flex-start：与交叉轴的起点对齐。</li>
<li>flex-end：与交叉轴的终点对齐。</li>
<li>center：与交叉轴的中点对齐。</li>
<li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li>
<li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
<li>stretch（默认值）：轴线占满整个交叉轴。<br>
<img src="https://img2020.cnblogs.com/blog/1736986/202003/1736986-20200328152041204-1947593836.png" alt="" loading="lazy"></li>
</ul>
<p>学习地址：https://www.w3school.com.cn/css3/index.asp ，https://www.runoob.com/css3/css3-tutorial.html</p><br><br>
来源：https://www.cnblogs.com/riyir/p/12587417.html

查看完整版本: CSS学习