首页 > 其他分享 >5.25学习总结

5.25学习总结

时间:2023-06-10 21:35:44浏览次数:47  
标签:总结 box 元素 边框 学习 5.25 nav div 轮廓

CSS3 调整尺寸(Resizing)

CSS3中,resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)

CSS代码如下:

OperaSafariChromeFirefoxInternet Explorer

实例

由用户指定一个div元素尺寸大小:

div { resize:both; overflow:auto; }
尝试一下 »

CSS3 方框大小调整(Box Sizing)

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

OperaSafariChromeFirefoxInternet Explorer

实例

规定两个并排的带边框方框:

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }
尝试一下 »

CSS3 外形修饰(outline-offset )

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同:

  • 轮廓不占用空间
  • 轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。

CSS 代码如下:

OperaSafariChromeFirefoxInternet Explorer

实例

规定边框边缘之外 15 像素处的轮廓:

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
尝试一下 »

新的用户界面特性

属性说明CSS
appearance 允许您使一个元素的外观像一个标准的用户界面元素 3
box-sizing 允许你以适应区域而用某种方式定义某些元素 3
icon 为创作者提供了将元素设置为图标等价物的能力。 3
nav-down 指定在何处使用箭头向下导航键时进行导航 3
nav-index 指定一个元素的Tab的顺序 3
nav-left 指定在何处使用左侧的箭头导航键进行导航 3
nav-right 指定在何处使用右侧的箭头导航键进行导航 3
nav-up 指定在何处使用箭头向上导航键时进行导航 3
outline-offset 外轮廓修饰并绘制超出边框的边缘 3
resize 指定一个元素是否是由用户调整大小 3

标签:总结,box,元素,边框,学习,5.25,nav,div,轮廓
From: https://www.cnblogs.com/clh628/p/17471969.html

相关文章

  • 5.27学习总结
    CSS按钮本章节我们为大家介绍使用CSS来制作按钮。基本按钮样式默认按钮 CSS按钮实例.button {背景颜色: #4CAF50; /*绿色*/边框:无;颜色:白色;填充:15px32px;文本对齐:居中;文字装饰:无;显示:内联块;字体大小:16px;}尝试一下»按钮颜色绿 蓝 红 灰色 黑我们可......
  • 5.26学习总结
    CSS图片本章节将为大家介绍如何使用CSS来布局图片。圆角图片实例圆角图片:img {    border-radius: 8px;}尝试一下»实例椭圆形图片:img {    border-radius: 50%;}尝试一下»缩略图我们使用 border 属性来创建缩略图。实例img {    b......
  • 5.29学习总结
    CSS3框大小CSS3 box-sizing 属性可以设置width和height属性中包含了padding(内边距)和border(边框)。浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的-webkit-或-moz-为指定浏览器的前缀。属性     box-sizing10.04......
  • 5.28学习总结
    CSS分页实例本章节我们将为大家介绍如何通过使用CSS来创建分页的实例。简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。以下实例演示了如何使用HTML和CSS来创建分页:CSS实例ul.pagination {    display: inline-block;    paddin......
  • 5.31学习总结
    flex-directionflex-direction 属性指定了弹性子元素在父容器中的位置。语法flex-direction:row|row-reverse|column|column-reverseflex-direction的值有:row:横向从左到右排列(左对齐),默认的排列方式。row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。......
  • 5.30学习总结
    CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、......
  • 6.1学习总结
    justify-content属性内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(mainaxis)对齐。justify-content语法如下:justify-content:flex-start|flex-end|center|space-between|space-around各个值解析:flex-start:弹性项目向行头紧挨着填......
  • 2023Fiddler抓包学习笔记 -- 环境配置及工具栏介绍
    一、Fiddler介绍Fiddler是位于客户端和服务器端的HTTP代理,常用来抓http数据包,可以监控浏览器所有的http和https流量,查看分析请求数据包和响应数据包,伪造请求和响应等功能。二、下载安装1、下载地址https://www.telerik.com/download/fiddler/fiddler42、一路下一步安装,安装完成后,发......
  • 5.22学习总结
    1.类和对象的抽象理念类和对象的概念是面向对象编程(OOP)的基础。在Python中,面向对象的设计方法提供了一种封装数据和功能的有效方式。它让我们能将现实世界的事物和行为映射到代码中,这种映射更加符合我们人类的认知方式,让我们能以更自然的方式理解和设计复杂的软件系统。类的抽......
  • 第八周总结
    用户场景分析是软件开发过程中的一个重要步骤,它是指通过研究用户在特定情境下的行为和需求来定义需求规格或设计产品。用户场景分析旨在了解用户的需求、行为和情境,以便优化产品设计和开发过程。下面是一些用户场景分析的核心概念和方法。 用户场景 用户场景是指描述用户在......