![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 70
对自己的文章进行清晰分类
橙蚊镜0819
Step by step becoming an architect
展开
-
锚点定位方案
当 alignToTop 为 true 时,scrollIntoViewOptions: {block: “start”, inline: “nearest”}这是它的默认值,当 alignToTop 为 false 时,scrollIntoViewOptions: {block: “end”, inline: “nearest”}这是它的默认值。block:定义元素的垂直方向的对齐方式,有"start", “center”, “end”, 或 “nearest” 4 个选项,默认 start。原创 2023-03-20 20:29:33 · 1917 阅读 · 0 评论 -
css新特性
radial-gradient :(径向渐变)边框圆角:(border-radius)边框图片:(border-image)边框阴影:(box-shadow)原创 2022-12-12 20:54:17 · 362 阅读 · 0 评论 -
flex响应式布局
flex布局父元素属性flex-direction:元素排列方向row从左到右(默认) row-reverse从右到左 column(从上到下) column-reverse如果父元素不设置高度,会有子元素的高度把他撑起来如果给父元素设置了display:flex,并且宽度小于子元素总体宽度的和,自动对子元素进行压缩如果想让他换行:flex-wrapflex-wrap:元素换行nowrap:默认值,不换行、不换列wrap:换行或换列wrap-reverse:换行或换列,原创 2021-12-28 19:59:11 · 715 阅读 · 0 评论 -
css文本溢出
单行文本溢出text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本 white-space:设置文字在一行显示,不能换行 overflow:文字长度超出限定宽度,则隐藏超出的内容overflow设为hidden,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略white-space:nowrap,作用是设置文本不换行,是overflow:hidden和text-overflow:ellipsis生效的基础text-overflow属性值原创 2022-02-16 19:37:29 · 3869 阅读 · 0 评论 -
响应式布局
面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?#一、是什么响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Content is like water”大白话便是“如果将屏幕看作容器,那么内容就像水一样”响应式网站常见特点: 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时转载 2022-02-16 19:23:51 · 359 阅读 · 0 评论 -
grid网格布局
grid布局:二维网格布局,最强大的css布局方案1、容器属性grid-template-*grid-template-columnsgrid-template-columns:100px 100px 100px;有几个值代表有几列,每一列的宽度为多少,不设置默认撑满父元素宽度grid-template-rows grid-template-rows:100px 100px 100px;有几个值代表有几行,每一行的高度为多少,不设置默认撑满父元素高度 grid-templa原创 2022-02-14 17:16:49 · 746 阅读 · 0 评论 -
水平垂直居中实现方式总结
1、利用定位+margin:auto父级设置为相对定位,子级绝对定位 ,并且四个定位属性的值都设置了0,那么这时候如果子级没有设置宽高,则会和父元素宽高相同,完全覆盖这里子元素设置了宽高,所以宽高会按照我们的设置来显示,但是实际上子级的虚拟占位已经撑满了整个父级,这时候再给它一个margin:auto它就可以上下左右都居中了<style> .father{ width:500px; height:300px; border..原创 2022-02-14 15:02:00 · 295 阅读 · 0 评论