十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

【Web·基础学习】布局模式和style和css的关系

【Web·基础学习】布局模式和style和css的关系 CSS 的 display 属性决定了元素的显示类型和内部布局模式。普通流布局Normal Flow→ block / inline / inline-block弹性布局Flexbox→ flex / inline-flex网格布局Grid→ grid / inline-grid表格布局Table隐藏 → none / contentsstyle和css的关系在网页中有三种主要方式来写 CSS其中两种都叫 “style”方式写法说明优先级内联样式div styledisplay: flex; color: red;直接写在 HTML 标签的 style 属性里最高内部样式style .box { display: flex; } /style写在 HTML 页面的style标签里中等外部样式link relstylesheet hrefstyle.css单独的 .css 文件最低但最推荐简单对比!-- 1. 内联 style直接写在标签上 -- div styledisplay: flex; background: pink;内容/div !-- 2. 内部 style页面里的 style 标签 -- style .box { display: flex; background: pink; } /style div classbox内容/div !-- 3. 外部 CSS 文件 -- !-- 在 style.css 文件里写 -- .box { display: flex; background: pink; }CSS样式语言 ├── 内联样式style 属性 ← 直接写在标签上 ├── 内部样式style 标签 ← 写在当前 HTML 页面里 └── 外部样式.css 文件 ← 独立文件最常用、最推荐
返回列表