前端新人学习笔记-html/css/js基础知识点(三)_html/css_WEB-ITnose
这断时间家里有点事,上班也有点任务,所以几天没看视频没来更新了。今天来更新一下了。
一:默认样式重置
但凡是浏览默认的样式,都不要使用。
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
二:块元素和内嵌元素
块元素的特征:
1.默认独占一行;
2.没有宽度时,默认撑满一排;
3.支持所有css命令;
内联元素的特征:
1.同类的标签可以在同排显示;
2.不支持宽高;
3.内容撑开宽度;
4.不支持上下的margin和padding;
5.代码换行被解析;
三:块元素和内嵌元素的转换
display:block 使内联元素具备块属性标签的特性;
display:inline 使块元素具备内嵌元素的特性。
display:inline-block
特性:1.块在一行显示;
2.行内属性标签支持宽高;
3.没有宽度的时候内容撑开;
问题:1.代码换行被解析;
2.ie6,7不支持块属性标签的inline-block;
四:浮动
1.块在一排显示;
2.内联元素也支持宽高了;
3.默认内容撑开宽度;
4.脱离文档流;
5.提升层级半层
这个时候div标签就和里面的内容位于同一层级了。
这个时候会出现这样的现象,这就和提升了半个层级有关。

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
