分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

遇到的css问题

发布时间:2023-09-06 02:21责任编辑:蔡小小关键词:暂无标签

一、css如何使用em,rem单位中来控制不同屏幕的字体比例尽量一致。

二、介绍一下css的盒子模型

css盒子模型又称框模型,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

三、box-sizing属性介绍

box-sizing:content-box|border-box|inherit

1.content-box默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

总宽度=margin+border+padding+width

2.border-box设置的width值除了margin之外的border+padding+element的总宽度。盒子的width包含border+padding+内容

即总宽度=margin+width

3.inherit,规定应从父元素继承box-sizing属性的值

关于border-box的使用

a.一个box的宽度为100%,又想要两边有内间距,这时候用就比较好

b. 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

四、position的取值?

1、position的属性取值: static(默认) relative、absolute、fixed、inherit。

2、position:relative和absolute都可以用于定位,区别在于relative的div属于正常的文档流,absolute是脱离了正常文档流,不占据空间位置,不会将父类撑开

3、position:static始终处于文档流给予的位置

4、position:fixed  定位原点相对于浏览器窗口

五、display
    1、display属性取值:none、inline、inline-block、block、flex、inherit。
    2、display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框。
    3、display:none和visiability:hidden都可以隐藏div,区别有点像absolute和relative,前者不占据文档的空间,后者还是占据文档的位置。
    4、display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。
    5、inline-block就介于两者之间。
    6、display: flex 意为"弹性盒布局模型",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用flex布局的元素,称为flex容器。

六、css reset的作用

七、px、em、rem的区别

八、选择器的种类及其优先级

九、解释解释CSS精灵,如何使用,有什么用

十、CSS中clear的作用

十一、html网页自适应移动端设备需要添加什么标签?如何强制让文档与设备宽度保持1:1

十二、只把图片的左上边框和右下边框设为圆角,css代码怎么写?

十三、自适应与响应式的区别

遇到的css问题

原文地址:https://www.cnblogs.com/xiaominss/p/9910670.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved