CSS实践详解总结

流烟默

已于 2024-05-01 15:37:42 修改

阅读量610

点赞数

分类专栏： HTML5 | Thymeleaf | Freemarker 文章标签： css 1024程序员节

于 2021-05-13 13:31:20 首次发布

本文链接：https://blog.csdn.net/J080624/article/details/116746777

版权

HTML5 | Thymeleaf | Freemarker 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

【1】CSS选择器

① 类选择器

1.后代选择

使用类选择器选择父类下面的所有后代。

#这里是父类与子类选择器
.wrapper-item .layui-form-label{
     width: 25%;
 }
    
<div class="wrapper-item">
  <label for="name" class="layui-form-label">
        <span class="we-red">*</span>姓名
    </label>
</div>

使用类选择器选择后代中某个标签元素

#父类与子标签
.myitem span{
    padding: 5px 0px;
}

<div v-for="item in myscoreList" class="list-group-item myitem "  >
    <span style="width: 10%">{{item.userName}}</span>
    <span style="width: 10%">{{item.courseName}}</span>
    <span style="width: 10%">{{item.score}}</span>
    <span style="width: 50%">{{item.appraise}}</span>
    <span style="width: 10%">{{item.createTime}}</span>
    <span style="width: 10%" class="mydel">删除</span>
</div>

使用类选择器选择后代中多个标签

<!-- 选择class为input-group的后代div input-->
.input-group div,input{
    margin: 0 0.5rem;
}
<div class="input-group">
    <label>选择平台：</label>
    <div>
        <input type="checkbox" class="form-check-input check-box" name="platform" value="天猫" title="天猫"/>天猫
    </div>
    <div>
        <input type="checkbox" class="form-check-input" name="platform" value="京东" title="京东"/>京东
    </div>
    <div>
        <input type="checkbox" class="form-check-input" name="platform" value="拼多多" title="拼多多"/>拼多多
    </div>
</div>

2.类与元素结合

选择元素class属性中包含某个class的元素

label.wrapper-item {
     width: 25%;
 }
<label for="name" class="layui-form-label">
	<span class="we-red">*</span>姓名
</label>

定义带有某个class属性的a标签的hover状态

a.duihuan:hover{
	opacity: 0.8;
	color: white;
}

<a v-if="userId!=''" class="duihuan">我要兑换</a>

3.同时拥有多个class的元素

如下选择某个标签同时拥有class：el-menu-item 和 is-active

.el-menu-item.is-active{
  background: #001528!important;
}

选择同时拥有两个类的div的后代img

div.ql-snow.ql-editor img{
  max-width: 100%;
}

【2】那些定位

① position

position有3个属性是我们平常用的最多的，即fixed，absolute，relative。定位基本遵循“子绝父相” ，子元素绝对定位，父元素相对定位。

① absolute

绝对定位，是相当于父元素（或者父父元素）的定位，不遵循文档流；也不占据空间。后来者居上，后边的元素会被顶到它使用绝对定位之前的位置。

② relative

相对定位，是相当于定位之前自身的位置，遵循文档流，定位之前的区域不会被顶替，还在原来占据着位置。定位之后的区域，不占据任何位置

③ fixed

固定定位，顾名思义，会固定在某一个位置，是相对于浏览器窗口的定位。不遵循文档流。用的最多的是APP等软件搜索框固定在最头上、最顶部，网页两端的广告固定。

什么是文档流？

文档流是从代码中，块级元素按照从上到下、行内元素从左到右顺序执行代码的流程。

④ 浮动Float

相当于绝对定位，脱离文档流/
浮动的属性常用包括left、right
相对定位可以和浮动一起用，绝对定位和浮动一起使用会把浮动效果删除。

【3】@media

CSS中@规则是由@符号开始的，例如@import，@page等。@media就是其中的一个规则。

@media可以让你根据不同的屏幕大小而使用不同的样式，这可以使得不需要js代码就能实现响应式布局。

不过@media只能用于较新的浏览器，对于老式的IE，不支持。

@media的语法比较简单，一眼就能看懂。

@media mediatype and|not|only (media feature) {
    CSS-Code; 
}

实例一：当屏幕高度大于900时，设置某个div高度

@media only screen and (min-height:900px)  {
    .banner {
        height: 800px;
    }
}

【4】段落文本

① 多行截取

如限制两行，多余备份截取用...替代：

.multi-line {
  font-size: 16px;
  height: 44px;
  width:400px;
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
  -webkit-line-clamp: 2; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
  overflow: hidden;/* 超出的文本隐藏 */
  text-overflow: ellipsis; /* 溢出用省略号显示 */
}
.multi-line {
	min-height: 2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: clip;
    overflow: hidden;
}

② 单行截取

// 单行截取
.single-line {
    width:400px;
    overflow:hidden;  /*超过部分不显示*/
    text-overflow:ellipsis;  /*超过部分用点点表示*/
    white-space:nowrap;/*不换行*/
}

white-space: nowrap; 规定段落中的文本不进行换行：
text-overflow: ellipsis;显示省略符号来代表被修剪的文本。

③ 文字换行

<div style="width=100px;word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">
这里是文字内容
</div>

white-space

这个属性声明建立布局过程中如何处理元素中的空白符。

pre-wrap表示：保留空白符序列，但是正常地进行换行。
默认值normal表示：空白会被浏览器忽略。

自动换行 word-break:break-all和word-wrap:break-word

一般这两个属性都会加上 height-auto;white-space:normal;

共同点：word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。

不同点：

word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

【5】动画

① jQuery scrollTop() 方法

返回 <div> 元素的垂直滚动条位置：

$("button").click(function(){
    alert($("div").scrollTop());
});

定义和用法

scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

提示：当滚动条位于最顶部时，位置是 0。

当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置。

当用于设置位置时：该方法设置所有匹配元素的滚动条的垂直位置。

语法

//返回垂直滚动条位置：
$(selector).scrollTop()

//设置垂直滚动条位置：
$(selector).scrollTop(position)

② CSS transition 属性

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div
{
	width:100px;
	transition: width 2s;
	-moz-transition: width 2s; /* Firefox 4 */
	-webkit-transition: width 2s; /* Safari 和 Chrome */
	-o-transition: width 2s; /* Opera */
}
div:hover {width:300px;}

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。

③ CSS transform缩放

div.product-image{
    overflow: hidden;
    margin-bottom: 40px;
}
div.product-image img{
    transition: all 0.6s;
    height: 100px;
    width: 200px;
}
div.product-image img:hover{
    transform: scale(1.2);
}


<div th:if="${goods!=null}" class="product-image">
  <img th:src="${'/file/fileDown?saveName='+goods.goodsPic1}" >
  <span style="font-size: 20px;">[[${goods.name}]]</span>
  <span>价格：<span>[[${goods.price}]]</span></span>
  <a class="purchase">购买</a>
</div>

在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。

跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。

当x或y取值为0~1之间时，元素进行缩小；当x或y取值大于1时，元素进行放大

④ animation实现消息左右滚动

.messageBox p{
     overflow:hidden;
     animation-name: HMove;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
 }
 @keyframes HMove{
     from {transform:translateX(0px);}
     to {transform:translateX(100px);}
 }
 //鼠标悬停事件，使动画停止
 .messageBox p:hover{
     cursor: pointer;
     animation-play-state:paused;
     color: #1E9FFF;
 }
<div class="messageBox">
    <p>您有一条新消息，点击查看</p>
</div>

效果如下图箭头所示，会左右滚动。
在这里插入图片描述

【6】修改标签样式

① input

修改placeholder样式：

input::-webkit-input-placeholder {
    color: #aab2bd;
    font-size: 12px;
}

设置文字居中：

input{
    text-align: center;
}

② 边框/盒子阴影

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

语法：

box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影 (outset) 改为内部阴影

.shaw {
    box-shadow: 0px 4px 6px #ccc;
}

在这里插入图片描述

.dianyingjjdiv{
	box-shadow: 1px 1px 5px 3px #eeeeee;
	padding:15px;
}

在Chrome上解析如下：
在这里插入图片描述
显式效果如下：

③ 渐变背景色

background: linear-gradient(to right, rgb(17, 112, 210), rgb(8, 179, 68)), rgb(17, 112, 210);

【7】宽高自适应

① vw和vh

width: 1vw; 等于  可视窗口   宽度的1%
height: 1vh; 等于  可视窗口  高度的1%

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

例如：设置div元素的高度为当前窗口高度-100px

div{
  height: calc(100vh - 100px);     
}

② 子左右dIV自动等高

如下所示，父div有两个子div，在保证左右排列的前提下想要使其自动等高。

<div class="wrap ">
	<div></div>
	<div></div>
</div>

这里推荐使用css3盒模型 display:box

不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。

.wrap 
{ 
	display: -webkit-box; 
	overflow: hidden; 
	width: 100%; 
	margin: 10px auto; 
}

其中with以及子div的排列样式根据需要自己调整。

③ object-fit

object-fit 是CSS的一个属性，用于控制替换元素（如、或

object-fit 的可选值包括：

fill: 默认值，内容会拉伸以填充整个内容区域，可能改变宽高比。
contain: 内容保持其原有宽高比，内容将在不裁剪的情况下尽可能大的填满内容区域，可能会有空白空间。
cover: 内容同样保持其原有宽高比，但会裁剪内容以完全覆盖内容区域，确保全部区域被填满。
none: 内容不进行调整，保留其原始尺寸，可能会超过容器的尺寸。
scale-down: 类似于 contain，但如果有任何方向上的尺寸大于容器，则会选择缩小至容器尺寸或小于容器尺寸，总之是以最小的方式缩放内容。

【8】flex布局

① 两端对齐

比如要求ul下的li每行四个，中间间隔但是需要两段对齐，如下图所示：
在这里插入图片描述

这是除了基本的flex布局外，还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。

.hl_list{
		width: 100%;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.ul_list .hl_list li{
		width: 25%;
		padding: 0 10px;
	}
	.ul_list .hl_list li:nth-of-type(4n+1){
		padding-left: 0;
	}
	.ul_list .hl_list li:nth-of-type(4n+4){
		padding-right: 0;
	}

② 单行截取多余的

display: flex;
flex-wrap: nowrap;
overflow-x: hidden;

flex-wrap: nowrap;规定item不换行。
overflow-x: hidden;规定X轴的超出隐藏

③ 子元素宽度不变

父元素设置flex布局，需要保证某个子元素宽度不变，可以为子元素设置属性如下：

flex-shrink: 0

子元素不设置 flex-shrink: 0 时子元素会随父元素宽度自动等分总宽度，子元素设置的宽度会自动失效

流烟默

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS实践详解总结

【1】CSS选择器① 类选择器1.后代选择选择父类下面的所有后代。.wrapper-item .layui-form-label{ width: 25%; } <div class="wrapper-item"> <label for="name" class="layui-form-label"> <span class="we-red">*</span>姓名 </label></
复制链接

扫一扫