好文分享

“margin:0 atuo;” 是什么意思？ “margin:0 atuo;”所代表的的意思是水平居中，其中的margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right，再因为上下边界为0，左右则根据宽度自适应相同值，所以表达的意思是水平居中。 CSS 水…

首先我们来介绍以下两个属性： 1、text-align是设置元素中文字的水平对齐方式。 它的作用对象是文本，控制文本，对块状元素等不起效果，只能让块元素里的内容(例如p标签内的文字：让文字在p标签内居中)相对块元素居中。 2、vertical-align是设置元素的垂直对齐方式。 它的作用对象是元素…

发现了个好东西 简介：position:sticky是css定位新增属性；可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；pos…

CSS弹性盒模型flex在布局中的应用 元素居中 【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items .parent{ display: flex; justify-content: center; align-items: center;} DEMO 【2】…

我们直接来看一下具体的实现代码： （如果您想学习css，那么这里向您推荐css视频教程） Document .radio-diy .radiocircle { width: 12px; height: 12px; border: 1px solid #999; border-radius: 50%;…

1.@media screen实现网页布局的自适应 优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。 官方文档：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 语法：@media me…

我们先来看一段css源码： ul{ margin-bottom: 20px; & >li { margin-bottom: 0; } } （视频教程推荐：css视频教程） & 表示嵌套的上一级。 这是sass的语法，代表上一级选择器。 上面的源码等同于如下代码： 立即学习“前端…

Web安全色对于大多数写程序的人来说都是毫无概念，当然，web safe color本身是一个历史遗留问题，今天已经没有太多讨论的必要。在这里介绍web安全色只是帮助还在Google “is web safe color still important”（Google搜索到的干货确实比百度强很多）的…

在实现元素自适应屏幕大小之前，我们先来介绍一个css知识点。 元素的margin和padding属性的值（无论是上下边距还是左右边距）如果设置为百分比，都是以宽度为基准计算的。 也就是说，在已知宽高比的情况下，css虽然不能确定height的值，但是可以确定padding-top等属性的值。 实现思…

本文目标： 1、掌握css3中border-radius的用法 问题： 实现以下界面效果，（不要求实现搜索功能），要求不使用任何框架，纯div+css3，同时必须使用border-radius知识点 其他说明： 立即学习“前端免费学习笔记（深入）”； 1、整个宽度是800x,要求居中显示 2、log…