前端面试八股文 html+css

ICbye

已于 2024-05-31 10:26:52 修改

阅读量724

点赞数 12

文章标签：前端开发语言 css html

于 2024-05-29 09:14:26 首次发布

本文链接：https://blog.csdn.net/weixin_56602874/article/details/139246078

版权

讲一下和模型模型普通盒模型和怪异盒模型的区别

根据盒模型概念每个页面上的元素都是一个拥有宽、高、内边距、边框及外边距的长方形盒子；

其中分为两种：一个是以W3C为标准的普通和模型，另一个以IE为主的怪异盒模型；

普通盒模型：设置宽度=>实际内容(content)，高度同理;

怪异盒模型:设置宽度 =>实际内容(content)+内边距(padding)+边框(border))，高度同理;

可以通过box-sizing修改盒子类型(个人理解)，box-sizng:content-box则为标准盒模型，box-sizng:border-box则为怪异盒模型，box-sizing:inherit，可以继承父元素的box-sizing属性值

盒子模型的宽度计算

一个盒子，宽度设为100px，padding设为100px，整个在页面占多少px？

盒子宽度 = width + padding + border + marign。

由于padding包括padding-left和padding-right，所以这个盒子水平占据100px + 100px × 2 = 300px。

display:none 和visiblity:hidden

display:none 不占据空间即使不在文档流中而visiblity:hidden还在文档流中

display:none子元素不可见 visibility:hidden 的子元素如果设置visbility：hidden则还可以看到

隐藏元素的方法

display:none;

visibility:hidden

opacity:0

将元素移出视口外部

css画三角形

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <style type="text/css">  
        #triangle {  
            /*1.内容区面积为0*/  
            width: 0;  
            height: 0;  
            /*2.设置边框样式*/  
            border: 10px solid;  
            border-color: white white red white;  
        }  
    </style>  
</head>  
<body>  
    <div id="triangle"></div>  
</body>  
</html>

块元素和行内元素有什么区别？常见的块级元素有那些

块元素	行内元素
独自占据一行，前后会有换行。可以设置宽度、高度、内外边距等属性。宽度默认为父元素的全部宽度。	不会独自占据一行，会和其他行内元素在一行显示。宽度和高度主要由内容决定。水平方向的内外边距有效，垂直方向的内外边距对布局影响较小。

常见的块级元素有：div、h1-h6、p、ul、ol、li、dl、dt、dd、table等。例如，<div>标签常用于划分页面的不同区域；<h1>表示一级标题等。

HTML语义化标签有哪些？

`<header>`：表示页面或章节的头部。
`<nav>`：用于定义导航栏。
`<main>`：表示页面的主要内容区域。
`<article>`：表示一篇独立的文章或内容块。
`<section>`：用于划分文档中的节。
`<aside>`：表示侧边栏内容。
`<footer>`：表示页面或章节的

最低0.47元/天解锁文章

ICbye

关注

12
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前端面试八股文 html+css

根据盒模型概念每个页面上的元素都是一个拥有宽、高、内边距、边框及外边距的长方形盒子；其中分为两种：一个是以W3C为标准的普通和模型，另一个以IE为主的怪异盒模型；普通盒模型：设置宽度=>实际内容(content)，高度同理;怪异盒模型:设置宽度 =>实际内容(content)+内边距(padding)+边框(border))，高度同理;
复制链接

扫一扫