随笔分类 - [12]CSS
摘要：transform 旋转（transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了。其中的位移的函数名就叫translate，所以说，translate是transform的一部分。） transition 平滑过渡（是 过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的
阅读全文
摘要：当两个空的块级元素嵌套时，如果内部的块设置有margin top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin top属性会绑架父元素（即将margin top传递凌驾给了父元素）。 html css
阅读全文
摘要：html css js 引入swiper 布局的时候，就要结合一些插件来实现最终效果！ 这里的slidesPerView要设置成自动“auto”，否则宽高不好控制。
阅读全文
摘要：表示将img标签，即图片标签由行内元素变成一个块级元素。 一般在制作轮播网页或使用到img图片时，我们都会对图片设置 。因为img图片下方会有一个3px的白色空隙产生，这样设置之后可以把img变为块级元素从而来消除这段空隙。 缝隙没有了！ Tips:布局过程中，会遇到各种各样稀奇古怪的东西！学以致用
阅读全文
摘要：上面的内容如何实现呢？ 先添加一个背景图。 背景图，需要设置高度，并保证图片路径正确。 然后就是正常的排列 最有趣的是下面的tag，正方形 Tips:需要计算宽高，需要用border来辅助布局。div可以实现方框的效果，很有趣。通过Flex布局，子元素宽度是个技术活，不能太宽，否则无法space b
阅读全文
摘要：巧妙利用边框（或者背景颜色）来进行布局。 填上内容和图片（由设计提供切图）。 去掉边框。 css html
阅读全文
摘要：html css 这里把高度都给限制死了。 可以换一个思路，通过设置margin top来处理竖向空间。
阅读全文
摘要：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 注意，设为 Flex 布局以后，
阅读全文
摘要：div居中 文字居中 文字垂直居中
阅读全文
摘要：
阅读全文
摘要：不换行！ 我曹，无情！ 宽度固定，自定换行！
阅读全文
摘要：主题，架子（时间架子，空间架子，三角架），素材。 CSS 三种方式 行内样式 嵌入样式 链接样式 上下文选择符 祖父 孙 父 子 紧邻同胞 一般同胞 通用 ID 类 选择符 属性选择符 选择带有属性名的标签 伪类 链接伪类 Link 待点击 Visited 点击过 Hover 悬浮 Active 正
阅读全文
摘要：分两部分布局，头部tab、列表内容。 html css
阅读全文
摘要：通过提供image+效果图，使用css，js实现页面的布局和效果。 scss是一个升级版的css工具，很好用。 html scss css 切页面，最核心的，就是css布局了。以及class命名之类的。
阅读全文
摘要：html scss 自动生成wxss 结构非常清晰，很方便。 这里的表单提交，放到form中。 js 很有意思。
阅读全文
摘要：label标签主要用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。 span标签被用来组合文档中的行内元素。
阅读全文
摘要：文本缩进（对p，div有效；对span无效） Tips：一般来说，可以为所有块级元素应用 text indent，但无法将该属性应用于行内元素（span），图像之类的替换元素上也无法应用 text indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
阅读全文
摘要：背景色 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距。 背景图片 背景重复。 背景定位。 百分数值。 如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明。 长度值。长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。 比如，如果设置值为 50px
阅读全文