![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 75
CSS知识记录
贾明恣
文章大多写于刚开始接触前端,现在看来有很多不足,正在整理中,先将整理所得备份到juejin同名账号,后期迁移。学习是个向内向外的过程,希望和大家交流
展开
-
前端CSS的学习梳理(自用)
JavaScript基础语法JavaScript数据类型、引用类型、操作符、语句JavaScript正则表达式函数相关JavaScript作用域、闭包及其应用作用域中this手写bind函数JavaScript内存相关初了解:堆栈、引擎对象相关有关prototype和__proto__JavaScript扩展JavaScript函数式编程...原创 2021-04-27 12:49:11 · 241 阅读 · 0 评论 -
响应式网页设计
Responsive Web Design响应式网页设计RWD 有三大组件流体网格(Fluid grid)用于网页上排版网格的适配。这种技术利用了 CSS 的相对大小来保证网格及其内容在上下文里的显示保持合适的比例。弹性图片(Flexible image)包括使用 CSS 的 max-width 属性来让图片和其他媒体在其父元素里渲染,以及其他相关的用于避免定点样式的技巧,大小固定的样式会导致无法适配所有显示设备。CSS3媒体查询(CSS3 media query)根据页面渲染环境的物理特征使原创 2021-04-17 15:40:11 · 293 阅读 · 0 评论 -
Bootstrap前端组件库+构建管理
Bootstrap使用Grunt来构建CSS、JavaScript,并用Jekyll来写作文档。Grunt是Node.js中一个JavaScript的任务管理器,也可以使用其他工具与技术来构建BootstrapBootstrap的版本默认版本、支持Flexbox的版本、仅包含网格系统的版本Bootstrap内置一个移动优先、12栏布局的响应网格系统Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入,就像在基本原创 2021-04-18 01:08:00 · 1308 阅读 · 0 评论 -
CSS学习记录
伪类与伪元素伪类是选择器的一种,选择处于特定状态的元素li:last-child { // 是最后一个孩子的li元素 background-color: lime;}:first-child:nth-child:only-childem:last-of-type 子元素列表中,最后一个em元素input:invalid 表示任意内容未通过验证的 <input> 或其他 <form> 元素 :hover——上面提到过,只会在用户将指针挪到元素上的时候才会激活,原创 2021-08-27 10:18:20 · 96 阅读 · 0 评论 -
两边固定大小,中间自适应的布局的方案:流体布局、双飞翼与圣杯的思考
流体布局原创 2021-05-08 12:54:21 · 206 阅读 · 0 评论 -
display属性理解: inline , block, inline-block+BFC格式上下文、盒模型
display的常用的属性值,inline , block, inline-block块级元素总是从新行开始width、height、margin、padding都可以控制宽度默认是页面的100%可以容纳内联元素和其他块元素<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><di原创 2021-04-28 00:44:39 · 579 阅读 · 0 评论 -
垂直居中、水平居中的多种方法总结,含代码
文本、行内元素块级元素自适应内容的块级元素基础方法行内元素水平居中text-align:center;//父元素属性行内元素垂直居中height:100px;//父元素属性line-height:100px;//父元素属性行高==高度即可大小确定的块级元素margin:auto;//自身使用position的absolute实现居中#father{ width:100px; height:100px; background-color: aqua;原创 2021-04-27 14:38:19 · 821 阅读 · 0 评论 -
CSS3多列布局
轻松的让文本呈现多列显示<!DOCTYPE html><html><head><meta charset="utf-8"> <style> .newspaper{ column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */}</style></转载 2021-04-25 14:19:22 · 66 阅读 · 0 评论 -
CSS基础知识
css前序概念关联CSS外部样式表:选择器选择属性(XML)选择属性值类选择器选择特定属性值后代(包含/上下文)选择器相邻兄弟元素伪类选择器静态伪类动态伪类结合伪类伪元素层叠顺序前序HTML是结构化语言,CSS是其补充、是一种样式语言。HTML还有可能会被XML可扩展标记语言所取代。元素生成一个box,其中包含元素内容。概念替换元素:替换元素内容的部分来呈现,并非文档内容直接表示。e.g:img是文档之外的图像文件、input非替换元素块级元素:默认填充父元素的内容区。e.g:p、div、列表原创 2021-04-14 00:52:26 · 136 阅读 · 2 评论 -
基础样式库normalize、构建模块化的CSS
基础样式整个页面的通用规则normalize.css库可以帮助消除不同客户端浏览器渲染上的不同。访问:https://necolas.github.io/normalize.css/8.0.1/normalize.css我也将源码列在文章末尾其他修饰符message模块的变体message–errormessage-warning不需要定义整个模块,只需要覆盖需要改变的地方多元素模块media__image、media__body一起填满media容器,构成media模块状态类i原创 2021-04-13 20:14:47 · 342 阅读 · 0 评论 -
CSS的display属性值+position:fixed应用:创建弹窗...
display 属性规定元素应该生成的框的类型。属性值列表如下:vue的if-show的底层代码就是通过display:none实现和 visibility 属性区别在:把 display 设置成 none 元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden; 还会占据空间。使用display:table清除浮动...原创 2021-03-31 01:52:44 · 1172 阅读 · 0 评论 -
CSS用一个X代替close按钮
.modal-close { padding: 0.3em; font-size: 2em; height: 1.5em; width: 1.5em; cursor: pointer; border: 0; } .modal-close::before { display: block; content: '\00D7'; }小方块按钮添加Unicode字符...原创 2021-03-31 01:10:05 · 280 阅读 · 0 评论 -
CSS网格系统display:grid
目录定义网格轨道指定元素所占位置命名网格线命名网格区域特性查询用浮动也可以实现网格系统可以参看另一篇博客不如用浮动实现一个网格和弹性盒子类似,网格布局也是作用于两级DOM结构。display:grid该元素成为一个网格容器,它的子元素成为网格元素。定义网格轨道新属性定义网格轨道:fr每一列的分数单位,权重两行三列grid-template-rows: 1fr 1fr;//等同于grid-template-rows:repeat(2,1fr );grid-template-colu原创 2021-03-31 00:42:12 · 269 阅读 · 0 评论 -
CSS弹性盒子Flex
弹性盒子可以控制内部元素的布局display:flex元素成为弹性容器,他的子元素成为弹性子元素弹性子元素像块级元素一样填充可用宽度,但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等,高度由他们的内容决定。利用弹性盒子写一个菜单栏/*外部容器设置为弹性*/ .site-nav { display: flex; padding: .5em; background-color: #5f4b44; list-style-type: n原创 2021-03-30 22:19:45 · 231 阅读 · 0 评论 -
关于CSS浮动的代码实践
浮动是为了实现文字围绕元素排列的效果,浮动元素不同于普通文档流的元素,它们的高度不会加到父元素上。这就会引发容器折叠:一个容器内的浮动元素可能会占据另一个容器的面积,这样两个容器的文档流都围绕浮动元素排列。对主容器的末尾元素设置clear属性,会扩展主容器的大小至涵盖整个浮动元素。伪元素::after可以快速在DOM中在容器末尾添加一个元素,而不需要在HTML中添加标记清除浮动有很多方法双容器模式:将网页内容居中通过将内容放置到两个嵌套的容器中,然后给内层的容器设置外边距,让它在外层容器中居原创 2021-03-30 20:18:15 · 540 阅读 · 0 评论 -
CSS长度单位em、rem、vh
字体大小ptpxem%px是像素单位,em是相对单位,pt是绝对单位。原创 2021-03-29 12:12:55 · 128 阅读 · 0 评论 -
CSS选择器、层叠、优先级、属性继承
目录选择器选择属性(XML)选择属性值类选择器选择特定属性值后代(包含/上下文)选择器相邻兄弟元素伪类选择器静态伪类动态伪类结合伪类伪元素层叠顺序属性继承属性简写属性选择器综合运用以下语法选择属性(XML)p[class]{带有class属性的p}img[alt][title]{border:3px solid red}选择属性值类选择器p.warningclass属性可以有多值,用空格分开p.warning.help{兼具warning和help的p}选择特定属性值img[cla原创 2021-03-29 10:51:41 · 317 阅读 · 0 评论