CSS笔记

已于 2024-03-05 11:17:11 修改
阅读量470 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css 笔记 前端
于 2020-09-30 19:05:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pspdragon/article/details/106842646
版权

CSS笔记

水平垂直居中

方案1：position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度一半的距离就可以实现
两种方法实现减去自身宽度的一半，第一种通过margin（height / 2, 0, 0, weight / 2）,第二种通过transform：translate(-50%， -50%)，可以用于inside宽高未知情况。

<div class="box">
	<div class="inside"></div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.inside {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px; //margin或者transform两者都可以
    transform:translate(-50%, -50%); //可以用于宽高未知情况
}

方案2：flex弹性布局

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.inside {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

方法3：display：table-cell
table-cell相当于td，是行内元素无法设置宽高，所以内部要嵌套一层设置为inline-block

<div class="box">
    <div class="inside">
        <div class="inner">
        </div>
    </div>
</div>

.box{
	background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.inside{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	background: #ccc;
}
#inner{
	display: inline-block;
	width: 20%;
    height: 20%;
}

伪元素::before,::after

伪类和伪元素

css选择器

  • p:first-child: 父元素的第一个子元素且是p
  • p:first-of-type: 父元素所有为p的子元素中的第一个
  • p:nth-child(n): 父元素第n个子元素，且该元素是p
    其中n可以是数字或公式
    • odd: 奇数
    • even: 偶数
    • an + b: a是周期的长度，b是偏移值
  • p:nth-of-type(n): 父元素所有为p的子元素中的第n个
  • not(selector): 选中所有不是selector的元素

选择器优先级

css属性选择器

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

子元素选择器

<h1>
   <div class="outer">
   	  <div class="inner"></div>
   </div>
</h1>   

h1 > div {
	background: white;
}

子元素选择器只会选择某个元素的子元素，不会选择’孙‘元素或更深层的元素
所以这里只有 class 为 outer 的 div 会被选择，而更深层的类名为 outer 的 div 不会被选择

css动画

css实现三角形

flex布局

box-sizing属性

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

　　	  总宽度 = margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

　　　　width = border + padding + element
　　　　总宽度 = margin + width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

background = padding + element

display:none, visibility:hidden, opacity:0

方式一、display： none

DOM结构：浏览器不会渲染display属性为none的元素，不占用空间；
事件监听：无法进行DOM事件监听，毕竟没有被渲染出来；
性能：动态改变此属性会引起重排，性能较差；
继承：不会被子元素继承，毕竟子元素也不会被渲染出来
transition（过渡）：不支持display。

方式二、visibility： hidden

DOM结构：元素被隐藏，但会被渲染，占用空间；
事件监听：无法进行DOM事件监听；
性能：动态改变此属性会引起重绘，性能较高；
继承：会被子元素继承，子元素可以通过visibility： visible 来取消隐藏
transition（过渡）：visibility会立即显示，隐藏时会延时。

方式三、opacity： 0

DOM结构：透明度为100%，元素隐藏，占用空间；
事件监听：可以进行DOM事件监听；
性能：不会引起重绘，性能较高；
继承：被子元素继承，但子元素不能通过opacity：1 来取消隐藏；
transition（过渡）：可以延时显示可隐藏（做隐藏和显示网页特效时一般用opacity）。

圣杯布局和双飞翼布局

三栏布局

两边宽度固定，中间自适应

float实现

问题:

  1. 由于设置浮动会导致center被浮动元素遮挡

解决办法：

  1. 为center设置左右margin
  2. 为center设置overflow: hidden创建bfc
<body>
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
</body>	
<style>
   div {
       height: 100px;
   }
   .left {
       width: 300px;
       float: left;
       background: red;
   }
   .right {
       width: 300px;
       float: right;
       background: blue;
   }
   .center {
       background: yellow;
       margin: 0 300px;
       overflow: hidden;
   }
</style>

绝对定位

<body>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</body>
<style>
   div {
       height: 100px;
   }
   .left {
       width: 300px;
       position: absolute;
       left: 0;
       background: red;
   }
   .right {
       width: 300px;
       position: absolute;
       right: 0;
       background: blue;
   }
   .center {
       position: absolute;
       left: 300px;
       right: 300px;
       background: yellow;
   }
</style>

flex布局

<div class="container">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>
<style>
   div {
       height: 100px;
   }
   .container {
       display: flex;
   }
   .left {
       width: 300px;
       background: red;
   }
   .right {
       width: 300px;
       background: blue;
   }
   .center {
       background: yellow;
       flex: 1;
   }
</style>

table表格布局

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    div {
        height: 100px;
    }
    .container {
        display: table;
        width: 100%;
    }
    .container >div {
        display: table-cell;
    }
    .left {
        width: 300px;
        background: red;
    }
    .right {
        width: 300px;
        background: blue;
    }
    .center {
        background: yellow;
    }
</style>

grid网格布局

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    div {
        height: 100px;
    }
    .container {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
        grid-template-rows: 100px;
    }
    .left {
        background: red;
    }
    .right {
        background: blue;
    }
    .center {
        background: yellow;
    }
</style>

纵向三栏布局

BFC

  • BFC的布局规则
    内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

  • 如何创建BFC
    1、float的值不是none。
    2、position的值不是static或者relative。
    3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
    4、overflow的值不是visible

css加载动画

渐变颜色字体

div充满父元素剩余空间

通过flex实现，父元素设置flex布局，高度为100%
子元素bottom设置flex-grow: 1从而自适应充满父元素剩余空间

<div class="container">
	<div class="top"></div>
	<div class="bottom"></div>
</div>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	.top {
	}
	.bottom {
		flex-grow: 1;
	}
}

jQuery

jQuery获取元素位置信息

$(element).height() //获取元素高度
$(element).width() //获取元素宽度
$(window).height() //获取当前窗口视图高度

$(element).scrollTop() //获取元素滚动的距离，既向下滚动了多少
$(element).scrollLeft()

$(element).offset().top //offset() 方法设置或返回被选元素相对于文档的偏移坐标,两个属性top和left
$(element).offset().left

$(element).position() // 获取元素相对于父元素的偏移 { top, left }

jQuery选择器

:nth-last-child // 获得父元素倒数某个子节点，会出问题，不推荐使用
$(element).children() // 获得全部子元素的数组

jQuery事件

监听窗口尺寸变化

$(window).resize([data], fn) // jQuery 写法
window.onresize(fn) // js 写法

$(window).resize(() => {
	console.log($(window).height())
})

transform

缩放字体小于12px并对齐

transform: scale(0.5);
transform-origin: 0 0;

display grid

position定位

锚点定位

  • scrollIntoView
  • window.scrollTo
    在使用 window.scrollTo 时需要注意避免将页面高度设置为小于当前浏览器视框高度（100vh），这样会导致没有滚动空间，没有效果

图片无限滚动

当只有一张图片时可以通过将宽度设置为图片的整数倍，设置 background-repeat: repeat 实现图片重复

父元素设置opacity对子元素产生影响

网络字体

rem和em

link和@import的区别

  1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

  2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

  3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

  4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

Sass和Less对比

position

在这里插入图片描述

transition和animation

CSS3 -webkit属性

-webkit-tap-highlight-color 解决iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景

SVG

[Canvas]

canvas模糊

pspdragon
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css笔记
04-02
css笔记是自己最近没啥事,重新的梳理了一遍之后,写的,为了帮助自己提高,希望对看到笔记的人,也能有所帮助.
CSS学习笔记
m0_58761900的博客
09-18 3016
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS笔记（精简）
weixin_46160720的博客
03-11 4417
CSS笔记 HTML 前端教程 前端笔记
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1241
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
CSS笔记.pdf
07-14
CSS笔记.pdf
CSS弹窗
那片枫叶~
05-21 269
CSS 曲线弹窗和气泡弹窗小笔记，高德地图。标注气泡，背景是图片。
B站pink老师CSS学习（一）
m0_56685529的博客
05-22 355
总结 总结 总结 总结
媒体查询：响应式设计的核心
aike13ky的博客
05-21 276
媒体查询是CSS3引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、设备类型、分辨率等）来应用不同的样式规则。通过媒体查询，我们可以根据设备的屏幕尺寸自动调整页面的布局、字体大小、图片尺寸等，从而为用户提供更加舒适和便捷的浏览体验。规则来定义条件表达式。条件表达式可以是设备的媒体类型（如。媒体查询的语法非常简洁明了，它使用。等）以及逻辑运算符（如。等）、设备的特性（如。
B站pink老师CSS学习（二）
最新发布
m0_56685529的博客
05-23 178
小猪佩奇
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 1000
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
web自动化高级定位-css
2301_77783487的博客
05-21 355
括号内填的是在同一堆相同的标签里找顺数第几个——是找爸爸的第几个孩子。对应表达式，注意：不同属性名的不同表达式！是找同种类型的第几个。
CSS Modules与Styled Components：提升CSS可维护性
天涯学馆
05-21 445
选择CSS Modules、Styled Components，或者是两者的结合，取决于项目的特点、团队的偏好以及你对CSS和JavaScript的熟练程度。关键是要找到一个既能满足项目需求，又能提高代码可维护性的解决方案。无论你选择哪种方式，都要确保团队对所选技术有足够的理解和熟练度，以便于长期的开发和维护。2500G计算机入门到高级架构师开发资料超级大礼包免费送！2500G计算机入门到高级架构师开发资料超级大礼包免费送！
前端工程化-babel、corejs、postcss
kjl536566的博客
05-17 433
/ babel 转换大概流程 js => AST(抽象语法树) => transform => generated code。// postcss 类似 js => AST(抽象语法树) => transform => generated code。// babel + corejs 上一节已经将了这个 babel es6转es5 corejs兼容js的新特性。babel转语法的 core-js通过一个垫片 兼容这个新特性 所以大家这个babel千万不要搞混了。脑子里面的想法 es6 -> es5。
CSS【常用CSS样式、盒子模型、定位、浮动 、扩展样式】--学习JavaEE的day46
gangain的博客
05-17 1071
CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 是为了解决内容与表现分离的问题 • 多个样式定义可层叠为一 • 样式通常存储在样式表中
css中的box-sizing: inherit
wangzhen12138的博客
05-20 203
属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。默认情况下，元素的宽度和高度只包括其内容区，不包括边框和内边距。可以确保元素的盒模型与其父元素的盒模型一致，从而避免因盒模型不同而导致的布局问题。是 CSS 中的一个属性值，用于继承父元素的。，元素的宽度和高度将包括内容、边框和内边距。时，该元素将继承其父元素的。
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [CSS知识点整理（pink老师课程的学习笔记）](https://blog.csdn.net/m0_53975499/article/details/113576769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [HTML+CSS学习笔记（pink老师前端课程笔记--补档）](https://blog.csdn.net/weixin_44524703/article/details/121071964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值