css: 基础一

1、display有哪些值？说明他们的作用

@1、block:设定元素为块级元素，占据一整行，可设置宽高。

@2、inline-block: 设定元素行内块元素，可设置宽高，一行能显示多个。

@3、inline：行内元素，不可设置宽高，一行可显示多个。

@4、none：设置元素不可见。

@5、Flex：开启弹性布局

@6、table：作为块级表格显示。

@7、list-item：像块级元素一样显示，并添加样式列表标记。

@8、inherit：继承父元素的display属性。

2、position的值relative和absolute定位原点是？

@1、relative：相对定位，相对于正常位置进行定位

@2、absolute：绝对定位，相对于父元素中最近一个position不为 static（静态，无定位）定位

@3、fixed：相对于浏览器窗口定位；

@4、inherit：继承父元素的定位；

@5、static：默认，无定位

3、怎么实现div的居中？

1、水平居中

@1、给div设置宽度，并使用margin：0 auto;

div{width:100px;height:100px;margin:0 auto;background:hotpink;}

@2、使用绝对定位

div{position:absolute；width:100px;height:100px;left:50%;margin-left:-50px;background-color:skyblue;}

2、水平垂直居中

@1、使用绝对定位

div{position:absolute；width:100px;height:100px;left:50%;top:50%;margin-left:-50px;margin-top:-50px;background-color:skyblue;}

@2、使用transform属性

div{position:absolute；width:100px;height:100px;left:50%;top:50%;transform:translate(-50%,-50%)background-color:skyblue;}

@3、使用弹性布局

.container{display:flex;align-items:center;justify-content:center;}.container div{width:100px;height:100px;background-color:hotpink;}

 

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/10429578.html

总结

以上是生活随笔为你收集整理的css: 基础一的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。