![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css知识点
鹤_
前端开发的小学生,平时自己收集总结的一些知识点,希望大家多支持,多提意见多交流
展开
-
css中的子元素设置margin-top或者margin-bottom作用到父元素上的问题
写页面的时候要实现这样一个效果要求:图标之间有一条线进行连接,最上边和最下边的图标没有线进行连接,数据动态加载图标和线也动态生成一、第一种实现方法横着的每条数据是一个父级,然后所有的数据又是一个父级,然后给最外层的父级加border-left,然后每条数据设置一个margin-left的负值,每条数据之间的间距用margin-bottom来设置,具体实现如下<!doctype html>...原创 2018-04-26 14:41:18 · 4843 阅读 · 0 评论 -
关于子父元素margin值重叠的问题解决方案
当父元素当中有一个子元素的时候,子元素设置margin-top或者margin-bottom的时候会不起作用,也就是子父元素之间并没有产生间距,但是这个值作用到了父元素的身上。具体代码如下:<!doctype html><html><head> <meta charset="utf-8"> <title>标题</title&am原创 2018-05-01 00:11:23 · 1213 阅读 · 0 评论 -
关于多行文字和序号或者图片对齐的问题
在写页面的过程中经常遇见这样的样式(1)多行文字和序号顶部对齐实现的办法有很多种,比如序号和文字在两个标签内直接设置一个顶部对齐的属性vertial-align:top;即可对齐,这种虽然易实现,但是会对写一个标签实现的方法如下:那么如果序号和文字在一个段落里面,就有一个更简单的方法直接用text-indent属性来实现,不需要多加标签,一个属性就可以实现,具体代码如下(推荐使用)<!doc...原创 2018-04-27 00:03:42 · 3536 阅读 · 0 评论 -
css利用padding百分比实现图片宽高成比例
有时需要做效果的时候需要实现一个效果就是一张单的图片或者轮播图,需要这个banner区域和屏幕的宽度进行适配,而且要求这个区域的宽高始终保持的相同的比例,比如保持比例4:3,并且随着屏幕进行自动的播放。最直观想到的可能是用js来实现,随时获取宽度并且计算出相对比例的高,然后进行赋值。但是这样很麻烦,纯css就可以实现。就是padding值这个属性,padding值在设置为百分比的时候,高度是根据宽...原创 2018-05-05 23:31:58 · 1475 阅读 · 0 评论 -
css布局实现单行文字水平居中,多行文字靠左
单行文字居中,多行文字靠左,需要css布局来实现,那么就需要用到两层元素,外面一层设置text-align:center;里面一层为行元素,需要设置text-align:left;这样有一行的时候因为里面是行内元素,有多少内容就多宽,而外面一层设置了text-align:center;所以会实现居中,当文字为多行的时候,由于本身设置了text-align:left,所以又会靠左显示。具体实现如下:...原创 2018-05-05 23:53:18 · 4028 阅读 · 0 评论 -
css实现单行文字、多行文字都垂直居中
有很多种方法可以实现这里我用两种方法来实现,一个是vertical-align,另一个是align-items具体实现如下:<!doctype html><html><head> <meta charset="utf-8"> <title>标题</title> <meta name="ke原创 2018-05-06 00:04:09 · 1337 阅读 · 0 评论