html,css基础十大重点问题

front-end0829      2022-02-16     115

关键词:

1.浏览器内核(主要指渲染引擎)

webkit 谷歌用的多

Safari 苹果

trident(IE内核)

Gecko 火狐用的最多,跨平台

Chromium/Blink  谷歌

移动端  iPhone iPad 等苹果 iOS 平台主要是 WebKitAndroid 4.4 之前的 Android 系统浏览器内核是 WebKitAndroid4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 BlinkWindows Phone 8 系统浏览器内核是 Trident

 

2.css3新增选择器:

结构伪类选择器:例如:li:nth-child(n)  (even偶数 odd奇数)

属性选择器:例如:div[class]{}    ( ^=以开头 $=以结尾 *通配

伪元素选择器:例如:p::first-letter{}

 

3.行内元素,行内块元素,块级元素的区别以及相互转换

行内元素(如span,b,img,a,u等):1)设置宽高无效 2margin左右有效上下无效,padding都有效 3)不会自动换行 4)除a外,里面只能放行内元素

行内块元素:1)不自动换行 2)宽高有效

块级元素(div,p,nav,aside,header)1)宽高有效 2margin,padding均有效 3)自动换行

 

4.CSS三大特性

1) 层叠

2) 继承(文本)

3) 优先(!important>行内样式>id>>标签)

 

 5.盒子模型:

padding指内边距 写法:1)上、右、下、左

margin指外边距

border指边框

widthheight在标准盒模型中指内容的宽高,IE盒模型指内容+border+padding的宽高

默认带有padding的标签:th,td

默认带有margin的标签:h1~h6,dl,dd,p

默认带有paddingmargin的标签:ol,ul,textarea

 

6.外边距合并问题

1)互为兄弟关系的块级元素。解决方案:避免

2)互为父子关系的块级元素,父元素没有内边距和边框。解决方案:1)父元素加边框或内边距2overflowhidden

 

7.清楚浮动

Why:解决父级元素因为子级元素引起的内部高度为0的问题

When: 父元素没有确定高度值,子元素浮动,导致父元素没有高

How:  1)额外标签法:在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.

2)父元素添加overflowhidden;

3)After伪元素清楚浮动

    .clearfix:after{

      content:"";//设置内容为空

      height:0;//高度为0

      line-height:0;//行高为0

      display:block;//将文本转为块级元素

      visibility:hidden;//将元素隐藏

      clear:both//清除浮动

     }

    .clearfix{

      zoom:1;为了兼容IE

    }

4)双伪元素

参考文档  https://www.jianshu.com/p/7e04ed3f4bea 了解BFC才能了解清楚浮动的原理

 

8.定位:

1)静态static:(默认)

2)相对relative:可通过边偏移改变位置,原来位置继续占有

3)绝对absolute:不占位置,父元素没定位,以屏幕,父亲有定位以最近父亲为基准(子绝父相)

4)固定fixed:变异的绝对,不占位置,完全脱标

 

9.模式转换:

浮动、绝对定位、固定定位会转换为行内块模式

 

10.displayvisibilityoverflow区别:

Display 隐藏后不保留位置,Visibility 保留 位置Overflow 溢出隐藏


10个html和css必须知道的重点难点问题

前端日刊登录10个HTML和CSS必须知道的重点难点问题2018-02-26阅读2982收藏6原链:segmentfault.com分享到: 前端必备图书《深入浅出Node.js》 >> >> 1.怎么让一个不定宽高的DIV,垂直水平居中?使用Flex只需要在父盒... 查看详情

html和css必须知道的重点难点问题(代码片段)

一、如何让一个不定宽高的div,垂直居中?     1、使用flex布局,只需要在盒子的父级设置如下代码即可:.classNamedisplay:flex;justify-content:center;align-items:center;    2、使用css3transform布局:      父级盒子设置: ... 查看详情

《通算一体网络十大基础问题白皮书》

...阐述通算一体网络的内涵和三大典型应用场景,在此基础上提出通算一体网络的十大基础问题,包含:分布式信息处理的数学基础、通算一体环境下信息熵的重定义、融合计算的信源编码问题、通算一体场景下的网络... 查看详情

2022佛山潭洲陶瓷展召开新闻发布会推出展会十大重点

...年怎么干?”主题展开,会上推出了本届展会的十大重点,将为2022年陶瓷行业带来更多商机和资源。佛山潭洲陶瓷展作为陶瓷行业风向标,是亚洲规模最大的展会,是中国陶瓷全产业链第一展、新型陶瓷材料... 查看详情

python14html基础-css&javascript&dom

本节内容  CSS基础  javascript基础  DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了。然后就是dom不怎么用,但是其实也用不到,大家以后都会是用jquery来做这一块的需... 查看详情

0009css基础选择器(标签类id通配符)

typora-copy-images-to:media第01阶段.前端基础.CSS基础选择器CSS选择器(重点)学习目标:理解能说出选择器的作用id选择器和类选择器的区别应用能够使用基础选择器给页面元素添加样式1.CSS选择器作用(重点)如上图所以,要把里面... 查看详情

html入门-页面结构&基础标签

...html格式(重点)七、html基本结构(重点)八、注释九、基础标签(重点)十、文本标签十一、布局标签十二、特殊符号一、什么是html?html超文本标记语言文本:文字元素超文本:视频,图片,音乐,链接标记符:由左书名号... 查看详情

less基础(代码片段)

less基础/2-1功能介绍和开发中的问题处理less预处理器解决的问题:复用、减少冗余、模块化、可维护。变量支持,选择器嵌套处理(BEM),条件逻辑,引用其他样式(Mixin),增强import。开发碰到的典型问题: 常见的css预处理器... 查看详情

html5十大新特性——canvas绘图

  H5引入了canvas标签,默认是一个300*150的inline-block。canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width、height。  一、获得‘画笔’对象,canvas所有的任务都需要它来执行    varctx=canvas.getCon... 查看详情

javaweb基础—css学习小结

重点记忆:四种结合方式三种基本选择器  1.CSS:层叠样式表  相当于皮肤  提高了可维护性、样式与内容分离(注释格式/**/)  2.CSS与HTML结合的四种方式:内联式、嵌入式、外部式   1.每个标签上都有一个style【... 查看详情

sdn你必须知道的十大问题——sdn书籍有哪些?

...,相关的知识有一大堆,诸如OpenFlow等,不得不说网络的基础知识是必备的,但是对于新手来说要从茫茫大海一般的知识点中找准方向的确有点困难,因此自己从网上收集了一些具有方向导向性的书籍供大家一起参考 申明:... 查看详情

html5十大新特性——svg绘图

  相对于canvas绘图,SVG是一种绘制矢量图的技术。全称叫做ScalableVectorGraphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身。需要注意的是,SVG图形的属性不属于HTMLDOM标准,需要用核心D... 查看详情

“5g+工业互联网”第一批重点行业和应用场景发布,涉及五大重点行业十大应用场景...

...括:电子设备生产、装备制造、钢铁、采矿、电力。十大应用场景涉及协同研发设计、远程设备操控、设备协同作业、柔性生产制造、现场辅助装配、机器视觉质检、设备故障诊断、厂区智能物流、无人智能巡检、生产智能... 查看详情

.net网站后台开发

...有些东西本身就不存在先后顺序的。个人学习经验:1.C#基础是必须的,不能光看,也不要一直追着概念,下点实例代码,网上很多,通过看别人些的代码去理解书面知识。2.如果做后台,HTML,CSS,JS等不需要太精通(能精通当然好... 查看详情

css十大选择器

CSS十大选择器: 1、id选择器#2、class选择器 句号.3、标签选择器标签名称4、相邻选择器 加号+5、后代选择器空格6、子元素选择器 大于号>7、多元素 组选择器 逗号,8、属性选择器元素[条件:属性属性=value... 查看详情

css基础教程

CSS简介CSS概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样... 查看详情

html基础

一、图像<img/>【重点】标签的属性<imgsrc="图片路径URL"/height="高度"width="宽度"alt="图片说明"title/>图像可以是GIF,PNG,JPEG,JPG,webp格式的图像文件jpgjpeg格式兼容性好webp格式Google推出的主流浏览器不兼容src必要属性最主要... 查看详情

css基础

[目录]目录[目录]一、CSS基础介绍二、CSS基础语法三、CSS的使用方法四、CSS选择器五、CSS继承和层叠六、CSS样式命名规则一、CSS基础介绍CSS层叠样式表(CascadingStyleSheet):用于定义HTML内容在浏览器内的显示样式特点:CSS简化HTML... 查看详情