文章 2022-09-15 来自:开发者社区

【网页前端】CSS的常用布局(上)·一

1. 引言&概述网页布局的本质:使用 CSS 盒子模型来进行调整和定位。布局的常见方式:标准流(普通流)浮动定位今天的讲义中,我们先讲解标准流 和 浮动。2. 基本布局:标准流标准流布局:标签按照默认方式排列,是布局中最基本的方式。我们前面学习的所有布局调整,全部都是标准流布局。例如:div 是标准 块级元素,独占一行,多个 div 从上到下顺序排列。例如:span 是标准 行内元素,从....

【网页前端】CSS的常用布局(上)·一
文章 2022-09-15 来自:开发者社区

【网页前端】CSS的基本样式边框、布局、字体

1.边框属性所有的 HTML 标签都有边框,默认边框不可见1.1border设置边框的样式格式:宽度 样式 颜色例如:border:1px solid red ,1 像素粗的 实线 红色边框。线条样式:solid 实线,none 无边,double 双线示例:效果:1.2 width用于设置标签的宽度示例:效果:1.3 height用于设置标签的高度示例:效果:1.4 background-co....

【网页前端】CSS的基本样式边框、布局、字体
文章 2022-07-10 来自:开发者社区

小程序】&【web前端】必备-Flex布局详解(弹性盒子)

文章目录什么是flex布局?设置flex布局flex的基本概念flex容器的属性1.flex-direction属性2.flex-wrap属性3.flex-flow属性4.justify-content属性5.align-items属性6.align-content属性项目的属性1.order属性2.flex-grow属性3.flex-shrink属性4.flex-basis属性5.flex属性....

小程序】&【web前端】必备-Flex布局详解(弹性盒子)
文章 2022-07-08 来自:开发者社区

前端必须熟悉的几种布局方式

熟悉HTML页面架构和常用布局FlexFlex 概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。注意:任何一个容器都可以指定为 Flex 行内元素也可以指定为 Flex 布局, display: inline-flex;Webkit 内核的浏览器,必须...

前端必须熟悉的几种布局方式
文章 2022-06-15 来自:开发者社区

web前端学习(二十五)——CSS3布局(水平 & 垂直对齐)的相关设置

1.CSS水平居中对齐1.1 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度,并将两边的空外边距平均分配。注意: 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。1.2 文本居中对齐如果仅仅是为了文本在元素内居中对齐,可以使用 tex....

web前端学习(二十五)——CSS3布局(水平 & 垂直对齐)的相关设置
文章 2022-06-15 来自:开发者社区

web前端学习(九)——HTML5区块与布局的相关标签设置

1.HTML5中区块的设置大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。实例:<h1>,<p>,<ul>,<table>。内联元素在显示时通常不会以新行开始。实例:<b>,<td>,<a>,<img>。HTML可以通过 <div> ....

web前端学习(九)——HTML5区块与布局的相关标签设置
文章 2022-05-27 来自:开发者社区

【前端3分钟】布局

响应式布局方案https://www.cnblogs.com/HCJJ/p/6408363.htmlhttps://www.cnblogs.com/PeunZhang/p/4517864.html布局结构网页布局结构,通常分为三种:通栏多栏又分为:等分多栏与非等分多栏布局方式固定布局:使用像素(px)作为页面基本单位;弹性布局:使用百分比(%)作为页面基本单位;混合布局:使用像素(px)和百分比....

【前端3分钟】布局
文章 2022-05-26 来自:开发者社区

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 (下)

vw 适配方案严格来说,使用 rem 进行页面适配其实是一种 hack 手段,rem 单位的初衷本身并不是用来进行移动端页面宽度适配的。到了今天,有了一种更好的替代方案,使用 vw 进行适配 。百分比适配方案的核心需要一个全局通用的基准单位,rem 是不错,但是需要借助 Javascript 进行动态修改根元素的 font-size,而 vw/vh(vmax/vmin) 的出现则很好弥补 rem....

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 (下)
文章 2022-05-26 来自:开发者社区

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 (上)

本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之处,万望告知。前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。而本文的主题 -- 移动端开发的兼容适配与性能优化,就是希望能从一些常见的移动端开发问题出发,厘清 Web 移动端开发的前前后后,一些技术的发展过程,一些问题....

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 (上)
文章 2022-04-27 来自:开发者社区

【前端第七课】媒体查询的语法;移动端适配相关知识点;Grid高级布局

目标掌握媒体查询的语法掌握移动端适配相关知识点掌握Grid高级布局响应式设计概念早年设计Web时,页面是以适配特定的屏幕大小为考量创建的,只有在符合设计者适配的屏幕上面,页面才能很好的表现。如果用户正在使用比设计者考虑的更小或者更大的屏幕,那么结果通常出现多余滚动条、过长的行或者没有合理利用的空间等等。随着人们使用的屏幕尺寸的种类越来越多,出现了响应式设计的概念(Responsive Web D....

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

产品推荐

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注