没心没肺づ惜

V1

2022/08/26阅读:69主题:默认主题

常用CSS笔记

CSS笔记

0.CSS常用属性参考

0-1.display 属性

--------------常用-----------
none:此元素不会被显示
inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
block:此元素将显示为块级元素,此元素前后会带有换行符。
inline-block:行内块元素。(CSS2.1 新增的值)
flex:将产生一个块级弹性盒子进行布局(css3)
inline-flex:将产生一个内联弹性盒子进行布局(css3)
table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table:此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row:此元素会作为一个表格行显示(类似 <tr>)。
table-cell:此元素会作为一个表格单元格显示(类似 <td> 和 <th>

参考链接:https://www.runoob.com/cssref/pr-class-display.html
https://www.runoob.com/css3/css3-flexbox.html

0-2.position 属性

--------------常用-----------
relative:生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。|

fixed:生成固定定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

注:切记 绝对定位属性是相对于最近的有定位的父元素,一级一级向上查找,
如果都没找到定位元素,则相对与html定位。 
所以一般相对于谁定位,那个谁就得有设置定位,比如position:relative,
且中间不能有别的定位,不然绝对定位相对的参考元素就变了

参考链接:https://www.runoob.com/cssref/pr-class-position.html

1.文本省略(文字超出部分显示省略号)

1-1.单行省略

<div class="text-one">单行省略单行省略单行省略单行省略单行省略单行省略单行省略单行省略单行省略单行省略单行省略</div>
.text-one
{
 overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 也可以用多行文本样式  -webkit-line-clamp: 1 这个1指几行省略
.text-one
{
 overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}*/

1-2.多行省略

<div class="text-two">多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略</div>
.text-two
{
 overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

2.清除浮动

清除浮动前 清除浮动后 注:使用浮动后记得一定要清除浮动,否则父级高度为0,使用了浮动的父级同级元素会由于使用了浮动的父级元素的高度坍塌而会往上挤,从而会导致排版错乱

2-1.清除浮动方法之使用overflow属性的hidden值开启BFC让浮动的子元素库撑开父级的高度清除浮动

<div class="wrap red o-hidden">
    <div class="ltr blue">
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
    </div>
    <div class="rtl green">
        <p>我是右侧内容</p>
        <p>我是右侧内容</p>
    </div>
</div>
<div class="pink">使用浮动布局下的内容</div>
.ltr {
    float: left;
}
.rtl {
    float: right;
}
.o-hidden {
    overflow:hidden;
}

2-2.清除浮动方法之利用伪元素开启haslayout清除浮动

<div class="wrap red clearfix">
    <div class="ltr blue">
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
    </div>
    <div class="rtl green">
        <p>我是右侧内容</p>
        <p>我是右侧内容</p>
    </div>
</div>
<div class="pink">使用浮动布局下的内容</div>
.ltr {
    float: left;
}
.rtl {
    float: right;
}
/* 兼容 IE6,7 */
.clearfix {
    *zoom1;
}

/* 万能清除法 利用after伪元素 */
.clearfix::after {
    content"";
    display: block;
    clear: both;
    height:0;
    overflow:hidden;
    visibility:hidden;
}

2-3.清除浮动方法之增加空标签并设置clear属性both值清除浮动

<div class="wrap red">
    <div class="ltr blue">
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
    </div>
    <div class="rtl green">
        <p>我是右侧内容</p>
        <p>我是右侧内容</p>
    </div>
    <div class="clear"></div>
</div>
<div class="pink">使用浮动布局下的内容</div>
.ltr {
    float: left;
}
.rtl {
    float: right;
}
.h {
    height64px;
}

2-4.清除浮动方法之固定父级高度清除浮动(不推荐)

<div class="wrap red h">
    <div class="ltr blue">
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
        <p>我是左侧内容</p>
    </div>
    <div class="rtl green">
        <p>我是右侧内容</p>
        <p>我是右侧内容</p>
    </div>
</div>
<div class="pink">使用浮动布局下的内容</div>
.ltr {
    float: left;
}
.rtl {
    float: right;
}
.h {
    height72px;
}

3.垂直水平居中

3-1.垂直水平居中方法之已知高度的元素垂直水平居中方案一

<div class="wrap p-rel red">
    <div class="main p-abs-c blue">
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>
.p-rel {
    position: relative;
}
.p-abs-c {
    position: absolute;
    left50%;
    top50%;
}
.wrap{
    height300px;
}
/*当前元素定位left:50%,top:50%后,此时内容左上角为父级正中心,
所以需要居中还需要向左偏移自身宽度的一半,向上偏移自身高度的一半*/

.wrap .main{
    height100px;
    width100px;
    margin-left: -50px;
    margin-top: -50px;
}

3-2.垂直水平居中方法之已知高度的元素垂直水平居中方案二

<div class="wrap p-rel red">
    <div class="main p-abs-c0 blue">
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>
.p-rel {
    position: relative;
}
.p-abs-c0 {
    position: absolute;
    left0;
    top0;
    right0;
    bottom0;
}
.wrap{
    height300px;
}
/* 利用绝对定位上下左右距离0再加margin的上下左右边距auto
(绝对定位盒子模型的特性高宽有内容撑开) */

.wrap .main{
    height100px;
    width100px;
    margin: auto;
}

3-3.垂直水平居中方法之未知知高度的元素垂直水平居中方案一

<div class="wrap p-rel red">
    <div class="main p-abs-c blue">
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>
.p-rel {
    position: relative;
}
.p-abs-c {
    position: absolute;
    left50%;
    top50%;
}
.wrap {
    height300px;
}
/* 当前元素定位left:50%,top:50%后,此时内容左上角为父级正中心,
所以需要使用css3的transform属性translate偏移自身宽高的一半 */

.wrap .main {
    -webkit-transformtranslate(-50%,-50%);
    transformtranslate(-50%,-50%);
}

3-4.垂直水平居中方法之未知知高度的元素垂直水平居中方案二

<div class="wrap red">
    <div class="sub-wrap green">
        <div class="main blue">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
    </div>
</div>
.wrap {
    display: table;
    height300px;
    width100%;
}
/* 父级设置display: table,当前设置display:table-cell ,
那当前元素就具备表格特性内容可垂直居中,
内容水平居中就再设置text-align: center */

.sub-wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
/* 设置display: inline-block父级的水平居中生效 */
.wrap .main {
    display: inline-block;
}

3-5.垂直水平居中方法之未知知高度的元素垂直水平居中方案三

<div class="wrap red">
    <div class="main blue">
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>
/* 设置display: flex结合justify-content: center,align-items: center
使子元素内容垂直水平居中 */

.wrap {
    height300px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

3-6.垂直水平居中方法之未知知高度的元素垂直水平居中方案四

<div class="wrap red">
    <div class="main blue">
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>
.wrap {
    height300px;
    text-align: center;
}
/* 利用after伪元素设置一个文字居中的空内容元素来让子元素有个居中的参考 */
.wrap::after {
    content'';
    display: inline-block;
    vertical-align: middle;
    height100%;
}
/* 设置display: inline-block父级的水平居中生效 */
/* 设置vertical-align: middle父级after伪元素参考生效 */
.wrap .main {
    vertical-align: middle;
    display: inline-block;
}

4.左边固定右边自适应布局

4-1.左边固定右边自适应布局之浮动布局

<div class="wrap o-hidden">
    <div class="ltr blue"></div>
    <div class="main green">
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
    </div>
</div>
.ltr {
    float: left;
}
.o-hidden {
    overflow:hidden;
}
.wrap .blue {
    width100px;
    height100px;
}
.wrap .green {
    margin-left100px;

4-2.左边固定右边自适应布局之定位布局

<div class="wrap p-rel">
    <div class="p-abs blue"></div>
    <div class="main green">
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
    </div>
</div>
.p-rel {
    position: relative;
}
.p-abs {
    position: absolute;
    left0;
    top0;
}
.wrap {
    padding-left100px;

.wrap .blue {
    width100px;
    height100px;
}

4-3.左边固定右边自适应布局之弹性布局

<div class="wrap">
    <div class="blue"></div>
    <div class="main green">
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
    </div>
</div>
.wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
/* 左侧跟右侧可以一样使用 flex: 1,
但由于默认会跟其它flex布局的元素影响自身宽度,
所以设置max-width: 100px;限制此宽度即可
.wrap .blue {
    -webkit-box-flex: 1;
    flex: 1;
    max-width: 100px;
} */

.wrap .blue{
    width100px;
    height100px;
}
.wrap .main {
    -webkit-box-flex1;
    flex1;
}

5.多列列表布局

5.1多列列表布局

<div class="list green o-hidden col-two">
    <div class="item ltr">
        <div class="m blue">
            我是内容
        </div>
    </div>
    <div class="item ltr">
        <div class="m blue">
            我是内容
        </div>
    </div>
    <div class="item ltr">
        <div class="m blue">
            我是内容
        </div>
    </div>
    <div class="item ltr">
        <div class="m blue">
            我是内容
        </div>
    </div>
    <div class="item ltr">
        <div class="m blue">
            我是内容
        </div>
    </div>
    <div class="item ltr">
        <div class="m blue">
            我是内容
        </div>
    </div>
</div>
/*
全局设置box-sizing: border-box 如全局不使用的话,就需要的区域单独使用
元素的总高度和宽度包含内边距和边框(padding 与 border)
*/

* {
    margin0;
    padding0;
    box-sizing: border-box;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
.ltr {
    float: left;
}
.o-hidden {
    overflow:hidden;
}
.list {
    padding8px;
}
/* 列表内容元素不需要圆角的情况下可省略当前的下一个层级
需要圆角的话由于当前是边框占位就得把圆角设置到当前的下一个层级
需要圆角的话可当前使用内边距占位可省略当前的下一个层级,但内边距占位会影响子元素的位置
*/

.list .item {
    float: left;
    border8px solid transparent;
}
.list .item .m{
    border-radius8px;
    height80px;
}
.col-two .item {
    width50%;
}
.col-three .item {
    width33.333%;
}
.col-four .item {
    width25%;
}

6.纯css自定义单复选框按钮

6.1复选框(可改单选按钮)绑定数据该怎么绑定input按钮标签就怎么绑定就可以了

<div style="padding: 20px;">
    <input id="AllCheck" class="imitate-btn-bg1" type="checkbox">
    <label class="imitate-lab-bg1" for="AllCheck"></label> 
    <label for="AllCheck">默认未选中</label>
</div>
<div style="padding: 20px;">
    <input id="AllCheck" class="imitate-btn-bg1" type="checkbox" checked="checked">
    <label class="imitate-lab-bg1" for="AllCheck"></label> 
    <label for="AllCheck">默认选中</label>
</div>
* {
    margin0;
    padding0;
    /*
    设置box-sizing: border-box 
    元素的总高度和宽度包含内边距和边框(padding 与 border)
    */

    box-sizing: border-box;
}
.imitate-btn-bg1 {
    display:none;
}
.imitate-btn-bg1 + label {
    background-imageurl('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAA3NCSVQICAjb4U/gAAAALVBMVEX///+hprehprehprehprehprehprehprehprehprehprehprehprehprehprd0XKVXAAAAD3RSTlMAESIzRGZ3iJmqu8zd7v8zDtSdAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAPVJREFUKJF1k88KQUEUxg/yrygLG4m8gLKVUlZ28gTyAsrCTskLKLL3BFKysJO1IixkYSMkrr5nMPeie+/0OYuZ6TedP3PONyKWecpjYNWKicO8PVh2zDjYSIHTWi0PmzaAeUkk3gYOP5YAhp9THhh8kyww+90XYHySJXG3w3cwtfYRqjb042FuAdyc1dVQV2sWTScMYm96G+KyhfL34uKGRWQkhL4bhtGVFHJu6MNOKlpIFfQqnbsOFZlcdVh5yuasw/RLsNVhFIKlDiP/IHOniWhJtHj6TNoQ2jraZDoOPjg6YioGLhsqMCpFLloub/oR9C/zBsU0n4PhpWahAAAAAElFTkSuQmCC');
    background-size: cover;
    background-repeat: no-repeat;
    width24px;
    height24px;
    border-radius100%;
    display: inline-block;
    position: relative;
    box-sizing: unset;
    vertical-align:middle;
    cursor:pointer;
}
.imitate-lab-bg1 + label {
    vertical-align:middle;
    cursor:pointer;
}
.imitate-btn-bg1 + label:active {
    cursor:pointer;
}

.imitate-btn-bg1:checked + label {
    background-imageurl('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAzLTEzVDE2OjU3OjMzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMC0wMy0xM1QxNzowMDozMCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMy0xM1QxNzowMDozMCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4ZmZlZmVjMi03ODYwLTg5NGItOTQyNi1lZjE5Y2ViMzkzNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OGZmZWZlYzItNzg2MC04OTRiLTk0MjYtZWYxOWNlYjM5Mzc5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6OGZmZWZlYzItNzg2MC04OTRiLTk0MjYtZWYxOWNlYjM5Mzc5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo4ZmZlZmVjMi03ODYwLTg5NGItOTQyNi1lZjE5Y2ViMzkzNzkiIHN0RXZ0OndoZW49IjIwMjAtMDMtMTNUMTY6NTc6MzMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7FaiS8AAABhElEQVRYw9WZP27CMBTGDVLFgITkldFsDMzdyS16gd4gN2hzhUicIEeAhQNwhcydoN26VNCHZEfBOMb/eR4+ZUhe3o+XPOfzgyw+vomDKKgAVaAdqAVdJLX8XMWvpS65bAMYqAadFECPdOKxLAbg9aaNA9SQGlNQE7jSsWImFS19AGngqumqSW0BrwGHBHBChyFIDHBaSBVg8wS4/uPWApZPhBMqhwBZpG516W6mAmwQwN096n71LsjE+oA1QsBaAFIk757qXaSEO41USY+gJWhveH1BuB1KAfclLWkmMRXhni023I8ENzeM25EBsxkTbmYR25LEcFPQ2eYeBDOcLeAGNObHJHC2gKNewk0KOAFo2iSfUmIV5K/0Q7zgRJPYLDNvEuRWAzfxhOuWGduFWgUpw72A/gI0WuX6qVtrNluh4LpPnatZWEeG68yCj91aRYK7sVu+hvUd9BoY7s6worf8WWya0G87s9i4ZzH6QD88ymL8lsUAM5sRcBZD9BB/Qzjl+geTLJWH1UtidQAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-size: cover;
    cursor:pointer;
    color#243441;
}
.imitate-btn-bg1:checked + label:before {
    content' ';
    border-radius100%;
    position: absolute;
    background-size:cover;
    opacity0.8;
    display: none;
    top0;
    left0;
    width24px;
    height24px;
    cursor:pointer;
}
.imitate-btn-bg1:checked + label:before {
    content' ';
    display: block;
    cursor:pointer;
}

分类:

前端

标签:

CSS

作者介绍

没心没肺づ惜
V1