![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
布局样式
文章平均质量分 82
这里是一些关于布局和样式的文章
背影、
前端学习拼搏者,专注于编程,喜欢新奇有趣的前端技术
展开
-
CSS中伪类与伪元素的概念、区别及常见用法
1. CSS 选择器 想要了解伪类与伪元素,我们不得不提到 CSS 选择器,CSS 选择器是元素和其他部分组合起来,告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式 选择器的种类有: 类型、类和ID选择器 标签属性选择器 运算符 伪类与伪元素 2. 伪类与伪元素 2.1 什么是伪类?什么是伪元素? 伪类:伪类是选择器的一种,它用于选择处于 特定状态 的元素,比如当它们是这一类型的第一个元素时,或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一原创 2021-08-11 21:19:55 · 695 阅读 · 0 评论 -
关于一些CSS中改变元素位置的属性的百分比参考对象的总结
1.写在前面 在写页面CSS过程中不可避免的需要写到一些改变元素位置的属性,例如改变元素外边距、内边距,改变定位元素的偏移等,当这些元素属性设置为一个绝对的数值时,你当然知道它会移动一个绝对的数值的位置;然而当其设置为百分比值时,你是否会思考:这个百分比值是相对于其包含块的大小还是相对于元素自身的大小呢? 本文就一些常用改变元素位置的属性的百分比参考对象给出总结。 2.参考对象 2.1 定位属性 top right bottom left top、left、right、bottom是定位元素属性,非定位原创 2021-08-09 23:55:31 · 320 阅读 · 0 评论 -
Grid 网格布局入门与总结
写在前面 grid布局笔者学习时主要参考阮一峰老师的grid讲解,这里给出参考链接可做补充学习,CSS Grid 网格布局教程。 以下则为笔者个人对grid网格布局要点的提炼和个人学习总结,仅供参考。 理论知识 1.概述 网格布局(Grid)是最强大的 CSS 布局方案。 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。 2.基本概原创 2021-08-09 23:54:23 · 285 阅读 · 0 评论 -
flex布局个人学习总结及入门案例
写在前面 flex布局笔者学习时主要参考阮一峰老师的flex讲解,这里给出参考链接可做补充学习,Flex布局教程:语法篇、 Flex布局教程:实例篇。 下面则为笔者个人学习总结和一个入门案例。 理论知识 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交原创 2021-08-09 23:50:05 · 266 阅读 · 0 评论 -
一眼便知CSS水平、垂直布局
写在前面 以下代码均通过博主测试验证,是没有问题的,只需要根据不同的情况灵活引用不同的代码即可。以下给出的代码全都是CSS代码,需要放在CSS选择器里面。 水平居中 1.普通的文本,写在父元素的选择器上 text-align: center; 2.行内元素,如span、strong等,写在父元素的选择器上 text-align: center; 3.行内块级元素,写在父元素的选择器上 text-align: center; 4.行内替换元素,如img等,写在父元素的选择器上 text-原创 2021-08-09 23:43:48 · 73 阅读 · 0 评论