电商网站设计欣赏,兰州网站的建设,如何免费做网站并发布,建设工程公司简介模板题目 盒子垂直水平居中如何实现text-align:center vertical-align: middle水平垂直居中布局positionmargin水平垂直居中布局 grid栅格化布局及其兼容性介绍一下BFC触发 BFC 的条件包括#xff1a;常见的用途包括#xff1a; 写过的动画效果overflow有哪些属性visible#x… 题目 盒子垂直水平居中如何实现text-align:center vertical-align: middle水平垂直居中布局positionmargin水平垂直居中布局 grid栅格化布局及其兼容性介绍一下BFC触发 BFC 的条件包括常见的用途包括 写过的动画效果overflow有哪些属性visiblehiddenscrollautooverlay 如何让一个盒子出现滚动条盒子模型介绍一下 border-box和content-boxcontent-box 盒子模型:border-box 盒子模型:盒子模型的设置 flex是哪些属性的缩写分别有什么用flex-grow:flex-shrink:flex-basis: remempxvhvw这些单位的区别position有哪些属性有啥区别static:relative:absolute:fixed:sticky: 实现0.5pxinline-block时可能盒子会出现间隙如何解决inline-block和block、inline的区别Block 元素:Inline 元素:Inline-block 元素:主要区别: inline的盒子能设置上下margin和左右margin吗css3哪些特性你经常使用flex布局 盒子垂直水平居中如何实现
text-align:center vertical-align: middle水平垂直居中布局 div text-align:center vertical-align: middle水平垂直居中布局/divdiv classtext-align-outterdiv classtext-align-center/div/div
.text-align-outter {background-color: plum;text-align: center;vertical-align: middle;/** 要配合table-cell一起使用 */display: table-cell;width: 300px;height: 300px;
}.text-align-center {display: inline-block;background-color: pink;width: 50%;height: 50%;
}positionmargin水平垂直居中布局
优点是兼容性较好缺点是必须知道子组件的宽高 divposition margin水平垂直居中/divdiv classposition-outterdiv classposition-center/div/div
.position-outter {position: relative;width: 300px;height: 300px;background-color: plum;
}.position-center {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin-left: -50px;margin-top: -50px;background-color: pink;
}当然还有更多方式我以前写过一篇常用的css布局 https://dengxi.blog.csdn.net/article/details/114955202 里面详细介绍了水平居中垂直水平居中圣杯等布局方式。
grid栅格化布局及其兼容性
容器Grid Container设置一个元素为网格容器通过 display: grid; 属性。 项目Grid Item在网格容器内的元素称为网格项目可以通过 grid-column 和 grid-row 等属性来定义它们在网格中的位置。 行Grid Row 和 列Grid Column网格被划分为行和列你可以通过设置网格线的位置来定义它们的数量和大小。 网格线Grid Line水平和垂直的线形成了网格的划分你可以通过设置网格线的位置来调整行和列的大小。
CSS Grid 的兼容性不算良好主流现代浏览器已经支持。以下是一些常见的浏览器对 CSS Grid 的支持情况 Chrome从 Chrome 57 开始支持 CSS Grid。 Firefox从 Firefox 52 开始支持 CSS Grid。 Safari从 Safari 10.1 开始支持 CSS Grid。 Edge从 Edge 16 开始支持 CSS Grid。 Opera从 Opera 44 开始支持 CSS Grid。
但低版本的浏览器以及ie浏览器并不支持。
更多关于栅格化布局的介绍 https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
介绍一下BFC
BFC即块格式化上下文Block Formatting Context是一个在 CSS 布局中的重要概念。BFC 形成了一种独立的渲染区域它影响了元素如何放置、定位以及与其他元素之间的交互。
触发 BFC 的条件包括
float 属性不为 none。 position 属性为 absolute 或 fixed。 display 属性为 inline-block、table-cell、table-caption、flex、inline-flex 之一。 overflow 属性不为 visible。
常见的用途包括
清除浮动以防止父元素高度塌陷。 阻止相邻块级元素的边距塌陷。 创建自适应的两栏布局。 控制浮动元素的布局与尺寸。
写过的动画效果
这个就按照自己的项目情况介绍一下主要是考察实现动画的方式以及它们的区别。 以前总结过一些实现动画的方式可以用来参考一下 https://dengxi.blog.csdn.net/article/details/116102127
overflow有哪些属性
visible
默认值溢出内容会显示在容器之外不会被截断。 可能会导致内容溢出到其他元素之上。
hidden
溢出内容会被隐藏不会显示在容器之外。 被裁剪的内容将不可见。
scroll
显示垂直和水平滚动条无论是否需要滚动。 即使内容没有溢出也会显示滚动条位置但不会禁用滚动。
auto
如果内容溢出会自动显示滚动条。 如果内容没有溢出不会显示滚动条。
overlay
类似于 auto如果内容溢出会自动显示滚动条。 不过滚动条将以一种更不占空间的方式显示在内容之上。
如何让一个盒子出现滚动条
如果是y轴的滚动条就要固定盒子的高度超出这个高度滚动条才可能会出现。 因此必须是inline-block或者是block的盒子最后才是使用overflow属性
.block-scroll {display: block;height: 200px;overflow: auto;
}同理如果是要x轴出现滚动条就要固定盒子的宽度最后不允许换行
.block-scroll {display: block;width: 200px;overflow: auto;
}盒子模型介绍一下 border-box和content-box
content-box 盒子模型:
元素的宽度和高度仅包括内容区域的尺寸不包括内边距和边框。 例如设置一个元素的宽度为200px如果有10px的内边距和2px的边框那么实际的占用宽度将是200px内容 20px内边距 4px边框总共224px。
border-box 盒子模型:
元素的宽度和高度包括了内容区域、内边距和边框的尺寸。 这意味着你设置的宽度和高度就是元素实际占用的尺寸包括了内部的空间。 使用 border-box 可以更方便地控制元素的总尺寸尤其在设计布局时更具灵活性。
盒子模型的设置
其中content-box 是浏览器的标准盒子模型开发者可以按照自己的开发习惯和项目要求统一使用盒子模型
* {box-sizingcontent-box;// box-sizingborder-box;
}flex是哪些属性的缩写分别有什么用
flex-grow:
决定弹性容器中的项目在剩余空间分配时的扩展比例。 默认为0表示项目不会扩展剩余空间将平均分配给其他扩展项目。 越大的值表示项目扩展得越多。
flex-shrink:
决定弹性容器中的项目在空间不足时的收缩比例。 默认为1表示项目会等比例地收缩以适应空间不足。 0 表示项目不会收缩。
flex-basis:
定义项目的初始尺寸。 可以设置为一个具体的长度值或百分比。 默认为 auto即根据项目内容自动确定尺寸。
flex: flex-grow flex-shrink flex-basis;
remempxvhvw这些单位的区别
1rem 在document根节点html标签上设置的font-size的参数 比如1rem 16px
html stylefont-size: 16px;
...
/html1em 父节点设置的font-size的参数 比如 对于p标签来说 1em 16px
htmldiv stylefont-size: 16px;p stylemargin: 1em;/p/div
/html1px 就是一个像素点坐标也可以参考屏幕的分辨率
1vh 是浏览器满屏高度的百分之一 1vw 是浏览器满屏宽度的百分之一
position有哪些属性有啥区别
static:
默认值元素按照正常文档流进行布局。 忽略 top, right, bottom, 和 left 属性。
relative:
元素相对于其正常位置进行定位。 其他元素仍然按照正常文档流进行布局但是可以通过 top, right, bottom, 和 left 属性微调位置。 元素仍然占据原始位置的空间不影响其他元素的布局。
absolute:
元素从正常文档流中脱离相对于其最近的已定位非 static祖先元素进行定位。 如果没有已定位的祖先元素那么元素将相对于 元素进行定位。 元素不再占据原始位置的空间会浮动在其他元素之上。
fixed:
元素相对于视窗进行定位不会随着页面滚动而移动。 常用于创建固定的导航栏或悬浮元素。
sticky:
元素根据正常文档流进行定位直到滚动到特定的阈值然后变为固定定位直到到达另一个阈值然后又恢复正常定位。 在元素在阈值范围内的过程中元素会始终保持在视口内部可见。
实现0.5px
如果你在样式中直接写0.5px的基本上是不可能会实现的但可以曲线救国通过缩小盒子来实现。 比如我想要实现一个长10px高0.5px的线条
div {width: 20px;height: 1px;background: #000;transform: scale(0.5);
}还有一种方式实现通过样式渐变色来实现一半设置为透明一半设置为想要的颜色。
当然以上这些方法都只是从视觉上实现0.5px并不是真正意义上的0.5px。
inline-block时可能盒子会出现间隙如何解决
加一行属性
font-size: 0inline-block和block、inline的区别
Block 元素:
占据一整行空间会自动撑满其父容器的宽度。 可以设置宽度、高度、外边距和内边距。 默认情况下一个块级元素会在前后创建一个新行使其内容从新行开始显示。
Inline 元素:
只占据它所包含内容的空间不会强制换行。 无法设置宽度、高度外边距上下无效左右有效内边距对上下左右都有效。 在一行上显示允许其他元素和文本与其位于同一行内。
Inline-block 元素:
类似于内联元素但可以设置宽度、高度、外边距和内边距。 不会强制换行而且可以与其他元素共享一行同时可以控制其尺寸和间距。
主要区别:
布局: block 元素独占一行inline 元素在一行上显示inline-block 元素也在一行上显示但可以设置尺寸。尺寸设置: block 和 inline-block 元素可以设置宽度和高度而 inline 元素不可以。外边距与内边距: block 和 inline-block 元素都可以设置外边距和内边距而 inline 元素的外边距上下不会影响布局。换行行为: block 元素会强制换行每个块级元素都从新行开始inline 元素不会强制换行而 inline-block 元素也不会强制换行可以在同一行内显示多个。
inline的盒子能设置上下margin和左右margin吗
可以设置左右但上下margin设置了也不生效
css3哪些特性你经常使用
主要考察的是对css3的熟悉程度一般来说常用的css3属性如下
border-radius用于创建元素的圆角边框。
box-shadow添加元素的阴影效果可以设置水平偏移、垂直偏移、模糊半径和颜色。
text-shadow为文本添加阴影效果具有水平偏移、垂直偏移、模糊半径和颜色属性。
background-size控制背景图片的大小可以使用关键字如cover和contain或具体尺寸。
opacity设置元素的透明度可以在0到1之间的值来调整元素的可见度。
transition用于在状态改变时添加过渡效果可以控制属性的变化时间、类型和延迟。
transform对元素进行2D或3D变换包括旋转、缩放、平移等效果。
animation创建元素的动画效果可以定义关键帧、持续时间、延迟等属性。
keyframes定义动画的关键帧用于在animation属性中使用。
box-sizing控制盒模型的计算方式可以选择content-box默认或border-box。
flexbox用于构建灵活的布局通过display: flex来启用可以使用flex-direction、justify-content、align-items等属性控制布局。
grid用于创建复杂的网格布局通过display: grid来启用可以使用grid-template-columns、grid-template-rows、grid-gap等属性定义网格结构。
media用于根据不同的媒体查询如屏幕大小、分辨率等应用不同的样式。
nth-child 和 nth-of-type用于选择一组元素中特定位置的元素可以用来实现奇偶行样式等效果。
flex-grow 和 flex-shrink用于在弹性布局中控制项目的伸缩性以适应不同的空间。
gradient创建渐变背景可以是线性渐变或径向渐变。
filter对元素应用图像滤镜效果如模糊、对比度调整等。
user-select控制用户是否可以选择文本内容。
column-count 和 column-gap控制多列布局中的列数和列之间的间隔。
outline类似于边框但不占据空间常用于元素获取焦点时的样式。
flex布局
flex布局考点很多一些常用的属性布局方式以及兼容性的问题需要大家关注。 查看一下 Flex 布局教程语法篇 作者 阮一峰
css常见考题先介绍到这里后面会抓紧安排第二期css常见面试题。
